angular 中的字体大小增加 [ngClass]="fontSize"

Font Size increase in angular with [ngClass]="fontSize"

我有 header.component，如果我单击小、中、大按钮字体大小全局调整（所有应用程序组件）。这是我的 link https://stackblitz.com/edit/angular-yrmgdt

附上我的 UI 屏幕截图供您参考enter image description here

一个可能的解决方案是创建一个 DocumentService 来设置文档 <html> 元素的 font-size 属性（参见下面的 stackblitz）。然后，您可以根据 <html> 元素字体大小调整 rem 中的元素大小。

document.service.ts

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;
  }

}

header.component.ts

export class HeaderComponent implements OnInit {

  @Input() sidenav: MatSidenav;

  constructor(private documentService: DocumentService) {}

  ngOnInit() {}

  toggle(size) {
    this.documentService.setCss('body', 'font-size', size);
  }
}

https://stackblitz.com/edit/angular-mg9k7b