Как изменить цвет всех компонентов с заданной директивой, когда пользователь выбирает другую тему? - PullRequest
Новая
       33

Как изменить цвет всех компонентов с заданной директивой, когда пользователь выбирает другую тему?

0 голосов
/ 03 марта 2019

Я создаю онлайн-конструктор документов, используя 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>

Когда пользователь нажимает кнопку, чтобы сменить тему, мне нужно изменить цвет фона, который я применяю, используя header-класс.Или, если я могу применить CSS с использованием другого класса, это тоже хорошо.Но изменение, вызванное извне любого из этих элементов, должно быть введено во все эти элементы с помощью конкретной директивы.

Любая помощь будет высоко ценится.

1 Ответ

0 голосов
/ 03 марта 2019

Я бы порекомендовал создать службу, например, под названием 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');
    }
}
...