Увеличение размера шрифта в углах с помощью [ngClass] = "fontSize" - PullRequest
0 голосов
/ 05 ноября 2019

У меня есть header.component, и если я нажимаю кнопку Размер шрифта для кнопки «Маленький, средний, большой», глобально изменяю размер (все компоненты приложения). вот моя ссылка https://stackblitz.com/edit/angular-yrmgdt

Прикрепленный скриншот моего пользовательского интерфейса для вашей ссылки введите описание изображения здесь

1 Ответ

1 голос
/ 05 ноября 2019

Возможное решение - создать 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

...