我有header.component,如果我单击“小”,“中”,“大”按钮字体大小,则会全局调整大小(所有应用程序组件)。 这是我的链接https://stackblitz.com/edit/angular-yrmgdt
为参考添加了我的UI屏幕截图enter image description here
答案 0 :(得分:1)
一个可能的解决方案是创建一个DocumentService
,它将设置文档font-size
元素的<html>
属性(请参阅下面的stackblitz)。然后,您可以根据rem
元素的字体大小来缩放<html>
中元素的大小。
import { Injectable, Optional, Inject } from '@angular/core';
import { DOCUMENT } from '@angular/common';
@Injectable()
export class DocumentService {
constructor(@Inject(DOCUMENT) private document) { }
setCss(element, attribute, value) {
this.document.querySelector(element).style[attribute] = value;
}
}
export class HeaderComponent implements OnInit {
@Input() sidenav: MatSidenav;
constructor(private documentService: DocumentService) {}
ngOnInit() {}
toggle(size) {
this.documentService.setCss('body', 'font-size', size);
}
}