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

Question

我正在使用 angular 4 构建在线文档生成器。我有像 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>

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

如有任何帮助，我们将不胜感激。

Answer 1

我建议创建一个服务，例如名为 ThemeService 的服务，以保存当前活动的主题。然后，您可以在需要设置或获取活动主题的任何地方注入该服务（在您的情况下，在 my-header 指令和用于 select 主题的组件中）。我在 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');
    }
}

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

How to Change color of all components with a given directive when the user chooses a different theme?

angular-directive

angular