html - 影响所有组件和模式的主题服务<ng-template let-modal="">在 Angular 6+</ng-template>

问题描述

根据帖子通过标题组件中的按钮切换类，该按钮通过Angular 6+影响主应用程序组件

我创建了一个theme服务，通过在中切换类，它适用于所有组件'dark-mode'，app.component.html直到我发现我的所有模态<ng-template let-modal>都在下<body>，当然这些模态不起作用。
所以我从这个答案转向另一个解决方案：stackoverflow.com/a/59123790/6630524

我试图注入DOCUMENT并Renderer2进入header组件，它工作正常。但是我现在看到该theme服务已被弃用，所以我投入Renderer2了该theme服务（不再在header组件中），它拒绝工作！

您能帮我保留theme服务，并且仍然能够将主题应用于所有组件（以及这些模态）吗？

标签： htmlangularservicesassthemes

解决方案

结果很长一段时间没有人回答，所以我决定自己深入研究解决方案，见下文仅供参考。

首先，仍然通过放入（之前在组件中本地设置）继续使用该theme服务：Renderer2theme.service.tsheader

    @Injectable({
      providedIn: 'root'
    })
    export class ThemeService {
      public isDarkMode: boolean;
      private renderer: Renderer2;

      constructor(
        @Inject(DOCUMENT) private document: Document,
        rendererFactory: RendererFactory2
      ) {    this.renderer = rendererFactory.createRenderer(null, null);
      }

      public toggleDarkMode() {
        this.isDarkMode = !this.isDarkMode;

        if (this.isDarkMode) {
          this.renderer.addClass(this.document.body, 'dark-mode');
        } else {
          this.renderer.removeClass(this.document.body, 'dark-mode');
        } 
      }
    }

其次，你需要在构造函数中设置一个公共变量，这里我选择构造函数header.component.ts：

export class HeaderComponent implements OnInit {
      /*
      * Inject the theme service which will be called by our button (click).
      * @param {ThemeService} themeService instance.
      */
      constructor(public themeService: ThemeService) {}

      ngOnInit() {}
    }

然后在中放置一个按钮header.component.html来切换您的主题（注意：您可以将按钮放在项目中的任何位置，以及相应的公共变量中定义abc.component.ts）

<button (click)="themeService.toggleDarkMode()"><i class="fa fa-moon"></i></button>

toggleDarkMode现在，只要单击按钮，就会触发公共功能，然后当主题服务根据您定义的dark-mode样式更新时，模式和其他组件将反映更改，例如：

#lucky.dark-mode {
    color: #a2b9c8;
    background-color: #01263f!important;
}

您可能需要将此应用于所有<body>in index.html：

<body id="lucky">
  <app-root></app-root>
</body>

祝你好运，编码愉快！

html - 影响所有组件和模式的主题服务在 Angular 6+

问题描述

解决方案

推荐阅读