字体大小随[ngClass] =“ fontSize”的增加而成角度

时间:2019-11-05 13:02:08

标签: angular angular-material angular-ui-router

我有header.component,如果我单击“小”,“中”,“大”按钮字体大小,则会全局调整大小(所有应用程序组件)。 这是我的链接https://stackblitz.com/edit/angular-yrmgdt

为参考添加了我的UI屏幕截图enter image description here

1 个答案:

答案 0 :(得分:1)

一个可能的解决方案是创建一个DocumentService,它将设置文档font-size元素的<html>属性(请参阅下面的stackblitz)。然后,您可以根据rem元素的字体大小来缩放<html>中元素的大小。

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