Возможное решение - создать DocumentService
, который установит атрибут font-size
элемента документов <html>
(см. Стекаблитц ниже). Затем вы можете изменить размер элементов в 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