当用户选择不同的主题时，如何使用给定的指令更改所有组件的颜色？

Question

我正在使用角度4构建一个在线文档构建器。我有像my-header，my-subheader这样的指令，它将应用于角度组件，并且它们控制组件的CSS属性，如粗体，字体大小等。

当用户为具有从红色到蓝色的“my-header”指令的所有组件选择不同的主题时，我想更改组件的颜色。

我不知道在Angular 4中这是怎么回事。

 @Directive({
  selector: '[my-header]'
 })
 export class MyHeaderDirective {

    constructor(renderer: Renderer2, hostElement: ElementRef) {

            renderer.addClass(hostElement.nativeElement, 'header-class');

    }
}

而html看起来像这样。

<app-element my-header></app-element>

当用户单击按钮更改主题时，我需要使用header-class更改我应用的背景颜色。或者，如果我可以使用不同的类来应用CSS也没关系。但是，从任何这些元素之外触发的更改需要使用特定指令注入所有这些元素。

任何帮助将非常感激。

Answer 1

我建议创建一个服务，例如名为ThemeService，以保存当前活动的主题。然后，您可以在需要设置或获取活动主题时注入该服务（在您的情况下，在my-header指令和用于选择主题的组件中）。我在StackBlitz上创建了一个小例子来演示如何做：https://stackblitz.com/edit/angular-w98pvx

相关的课程是theme.service.ts

@Injectable({
  providedIn: 'root'
})
export class ThemeService {
  currentThemeSubject: BehaviorSubject<Theme> = new BehaviorSubject<Theme>(themes[0])

  get theme() {
    return this.currentThemeSubject.value;
  }

  set theme(theme: Theme) {
    this.currentThemeSubject.next(theme);
  }
}

和my-header.directive.ts

export class MyHeaderDirective {

   @HostBinding('style.backgroundColor') get color() {
     return this.themeService.theme.backgroundColor;
   };

    constructor(renderer: Renderer2, hostElement: ElementRef, private themeService: ThemeService) {
      renderer.addClass(hostElement.nativeElement, 'header-class');
    }
}