根据帖子Toggle a class by a button from header component that affect main app component by Angular 6+
我创建了一个
theme服务，通过切换类'dark-mode'对所有组件都可以正常工作在app.component.html，直到我发现我的所有模态<ng-template let-modal>位于<body>下，当然这些模式不起作用。所以我从这个答案转向另一个解决方案:stackoverflow.com/a/59123790/6630524
我尝试注入(inject)
DOCUMENT和Renderer2进入header组件并且工作正常。但我现在看到theme服务已弃用，所以我输入Renderer2到theme服务(不再在header组件中)，并且它拒绝工作!
你能帮我保留 theme服务，并且仍然能够将主题应用到所有组件(以及这些模式)？
最佳答案
结果很长一段时间没有人回答，所以我决定自己深入研究解决方案，请参阅下面的仅供引用。
首先，仍然继续使用theme服务 Renderer2进入theme.service.ts (之前在 header 组件中本地设置):
@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');
}
}
}
其次，需要在构造函数中设置一个公共(public)变量，这里我选择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 中定义的公共(public)变量)
<button (click)="themeService.toggleDarkMode()"><i class="fa fa-moon"></i></button>
现公开toggleDarkMode每当单击按钮时都会触发函数，然后当主题服务按您定义的 dark-mode 更新时，模态和其他组件将反射(reflect)更改。样式，例如:
#lucky.dark-mode {
color: #a2b9c8;
background-color: #01263f!important;
}
您可能需要将此应用于所有 <body>在index.html :
<body id="lucky">
<app-root></app-root>
</body>
祝你好运，编码愉快!
关于html - 影响 Angular 6+ 中所有组件和模态 <ng-template let-modal> 的主题服务，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59341421/