Question

我正在使用angular 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>

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

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

1 个答案: