Javascript 如何允许用户在角度应用程序中更改字体大小？_Javascript_Angular_Typescript

Javascript 如何允许用户在角度应用程序中更改字体大小？

javascript angular typescript

Javascript 如何允许用户在角度应用程序中更改字体大小？,javascript,angular,typescript,Javascript,Angular,Typescript,如何让用户在angular应用程序中更改字体大小和字体系列，需要为每个用户设置不同的设置您将拥有一个全局组件，其中每个人都是它的孩子，例如应用程序组件。例如，将用户选择的字体添加到那里，每个孩子都会继承它 @Component({ selector: "app", template: ` //YOUR PRESENTATION HERE ` }) export class AppComponent { @HostBinding("style.font.size")

如何让用户在angular应用程序中更改字体大小和字体系列，需要为每个用户设置不同的设置

您将拥有一个全局组件，其中每个人都是它的孩子，例如

应用程序组件

。例如，将用户选择的字体添加到那里，每个孩子都会继承它

@Component({
  selector: "app",
  template: `
    //YOUR PRESENTATION HERE
    `
})

export class AppComponent {
  @HostBinding("style.font.size")
  get userFontSize() {
    return _userFontSize;
  }

  @HostBinding("style.font.family")
  get userFontFamily() {
    return _userFontFamily;
  }

  _userFontFamily: string;
  _userFontSize: string;

  ngOnInit() {
    //Whenever you apply new value either fontsize or fontfamily, the value will be updated
    this._userFontSize = "20px";
    this._userFontFamily = "Sylfaen";
  }
}

呈现的dom将如下所示

<html>
    <body>
        <app style="font-size:20px;font-family:sylfaen">
        </app>
    </body>
</html>

创建一个像fs-11、fs-12、fs-13、fs-14这样的全局类。所谓全局类，我指的是顶级DOM元素中存在的东西。你可以用它。一个比你的

风格更好的方法。scss

就这样做吧

.fs-11 {
  span,p {
    font-size: 11;
  }
}
.fs-12 {
  span,p {
    font-size: 12;
  }
}

然后，您可以使用

rxjs/operator

中的

Subject

订阅字体大小已更改的事件

然后，当字体大小的值通过上述主题传递时，无论何时发生更改，它都会为您提供最新的值

如果我有时间的话，我会想出一个stackblitz的例子，你可以用我发布的想法

这里是一个工作StackBlitz演示我让我知道，如果你有任何问题

可能重复您到目前为止所做的工作您可以使用计算的CSS属性您可以使用ngStyle