您可以創建在你的根組件爲每個字體樣式compononent,並導入符合以下條件:
Roboto示例。
組件
注:encapsulation: ViewEncapsulation.None
是這種情況下非常重要。
import { Component, OnInit, ViewEncapsulation } from '@angular/core';
@Component({
selector: 'app-font-roboto',
templateUrl: './font-roboto.component.html',
encapsulation: ViewEncapsulation.None,
styleUrls: ['./font-roboto.component.scss']
})
export class FontRobotoComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
SCSS
@font-face {
font-family: 'Roboto';
src: url("/assets/fonts/Roboto/Roboto-Regular.eot");
/* IE9 Compat Modes */
src: url("/assets/fonts/Roboto/Roboto-Regular.eot?#iefix") format('embedded-opentype'), /* IE6-IE8 */
url('/assets/fonts/Roboto/Roboto-Regular.ttf') format('truetype'), /* Safari, Android, iOS */
}
@font-face {
font-family: 'RobotoBold';
src: url("/assets/fonts/Roboto/Roboto-Bold.eot");
/* IE9 Compat Modes */
src: url("/assets/fonts/Roboto/Roboto-Bold.eot?#iefix") format('embedded-opentype'), /* IE6-IE8 */
url('/assets/fonts/Roboto/Roboto-Bold.ttf') format('truetype'), /* Safari, Android, iOS */
}
body {
font-family: 'Roboto', sans-serif;
}
根組件邏輯
模板 [HTML]
<div [ngSwitch]="fontType">
<app-font-roboto *ngSwitchCase="'Roboto'"></app-font-roboto>
</div>
組件
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
fontType: string;
ngOnInit(): void {
this.fontType = 'Roboto';
}
}
只需添加應用程序邏輯來得到當前字體和開關添加新節點爲需要的每個字體樣式。
相同的錯誤:/ 我認爲角嘗試評估之前的結合完成 –
'URL表達({{字體.URL}})' – Swoox
不,我甚至試圖 <風格* ngIf = 「字體」 > –