Ведение переменной в области видимости в Angular 9

Question

Я приехал с AngularJS, я только что перепрыгнул на Angular 9.

У меня есть состояние переключения (темный режим включен или выключен), который я хочу сохранить и сделать доступным ко всем компонентам.

Я переключаю его на маршруте root, и он должен сохранять состояние для всего сеанса и для всех представлений и маршрутов.

<button (click)="darkmode()">Dark mode</button>

export class ExhibitorMainViewComponent implements OnInit {

  exhibitors = exhibitors;

  public dark:boolean = false;
  public body = document.getElementsByTagName('body')[0];

  constructor(

  ) { }


  darkmode = function() {
    this.dark = !this.dark;
    this.dark ? this.body.classList.add('dark') : this.body.classList.remove('dark');
  } 
}

Это активирует его для компонента, используемого в маршруте root, но он исчезает, когда я go переходит к дочернему компоненту (другой маршрут), и когда я возвращаюсь также.

Я привык устанавливать переменную $ scope это будет доступно во всех приложениях, пока я использую один и тот же контроллер.

Как справиться с этим в Angular?

Answer 1

Здесь есть несколько вещей.

Во-первых, если вы хотите сохранить переменную доступной в глобальном масштабе, вам следует использовать службу с обеспеченнымIn: 'root':

@Injectable({
    providedIn: 'root'
})
export class DarkModeService {

    private darkmode = false;

    toggle() {
        this.darkmode = !this.darkmode;
    }

    get() {
        return this.darkmode;
    }

}

Затем введите ваш сервис, чтобы получить значение темного режима в любой сервис / компонент.

Но здесь, похоже, ваша проблема заключается в том, что ваши манипуляции с DOM (установите тёмный класс для тега body) не остаются при изменении маршрутов. Это может быть потому, что приложение перезагружается, как вы меняете маршрут? Вы должны использовать ссылку с атрибутом routerLink, таким образом, изменения DOM выполняются внутри, и ваш тег не изменится (и сохранит ваш класс).

 <a routerLink="/heroes" routerLinkActive="active">Heroes</a>

Также предпочтительный способ манипулировать DOM с помощью angular должен использовать Renderer2:

@Component({
  template: `<button (click)="toggleDarkmode()">Dark mode</button>`
})
export class MyComponentThatNeedsDarkModeValue {

    constructor(private renderer: Renderer2) {}

    toggleDarmode() {
        this.renderer.addClass(document.body, 'dark');
    }

}