在 Angular 中保持 scope 中的变量 9

Question

I come from AngularJS, I have just recently jumped to Angular 9.

I have a toggle state (dark mode on or off) that I want to maintain and make available to all components.

I toggle it in the root route, and it should keep the state for all the session and for all views and routes.

<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');
  } 
}

This will activate it for the component used in the root route, but it disappears once i go to a child component (other route) and when I come back also.

I'm used to setting a $scope variable that will be available on all the app as long as I use the same controller.

How does one manage this in Angular?

Answer 1

There are several things here.

First, if you want to keep a variable available globally you should use a service with providedIn: 'root':

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

    private darkmode = false;

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

    get() {
        return this.darkmode;
    }

}

Then inject your service to get the darkmode value in any service / component.

But here your problem seems to be that your DOM manipulation (set a 'dark' class to the body tag) do not remains when you change routes. This may be because the app is reloading, how do you change route? You should use link with a routerLink attribute, this way DOM changes are done inside the and your tag won't change (and keep your class).

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

Also the preferred way to manipulate the DOM with angular is to use Renderer2:

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

    constructor(private renderer: Renderer2) {}

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

}