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

Question

我正在使用Angular4构建一个在线文档构建器。我有My-Header，My-Subheader等指令，该指令将应用于Angular组件，它们控制组件的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>

用户单击按钮更改主题时，我需要更改使用标头级使用的背景颜色。或者，如果我可以使用其他类应用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');
    }
}