Angular 动态样式表链接

我创建了一个组件，让我可以预览谷歌字体。这需要指向字体样式表的链接。我可以看到样式表被加载，但文本不会显示在所选字体系列中

```

从'@angular/core'导入{Input，Component}；
从“@angular/platform browser”导入{domsanizer}；
@组成部分({
选择器：“字体预览”，
风格：[
'.preview{font family:“{{fontFamily}}”，
“.title{字体大小：18pt；颜色：#673ab7；}”，
“.large{font size:14pt；}”，
“.normal{font size:10pt；}”
],
模板：`
{{fontFamily}}
ABCĆDĐEFGHIJKLMNOPQRSŠTUVWXYZŽ
abcčćdđefghijklmnopqrsštuvwxyzž
1234567890‘?’“!”(%)[#]@/&®©$€£¥¢:;,.*
选择要预览的字体
`
})
导出类FontPreviewComponent{
@输入（）
fontFamily:字符串；
建造师(
公共消毒剂
) {}
get fontLink（）：字符串{
如果（此.fontFamily）{
返回此.sanitizer.bypassSecurityTrustResourceUrl（'https://fonts.googleapis.com/css?family=“+此.fontFamily.replace（”+）；
}
返回null；
}
}

```

我有点理解为什么这不起作用，但我想不出解决办法。
我想我可以用一个iframe来创建一个无角度的页面….://

修复了它：）

不需要这些样式

import { Input, Component } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';

@Component({
selector: 'font-preview',
styles: [
    '.preview { font-family: "{{fontFamily}}"',
    '.title { font-size: 18pt; color: #673ab7;}',
    '.large { font-size: 14pt;}',
    '.normal { font-size: 10pt;}'
    ],
template: `
    <div *ngIf="fontFamily; else noPreview">
        <link [href]="fontLink" rel="stylesheet">
        <div class="preview">
            <div class="title">{{fontFamily}}</div>
            <div class="normal">
            ABCČĆDĐEFGHIJKLMNOPQRSŠTUVWXYZŽ
            abcčćdđefghijklmnopqrsštuvwxyzž
            1234567890‘?’“!”(%)[#]@/&<-+÷×=>®©$€£¥¢:;,.*
            </div>                
        </div>
    </div>
    <ng-template #noPreview>
        Select a font to preview
    </ng-template>
`
})
export class FontPreviewComponent {

    @Input()
    fontFamily: string;

    constructor(
        public sanitizer: DomSanitizer
    ) {}

    get fontLink(): string {
        if (this.fontFamily) {
            return this.sanitizer.bypassSecurityTrustResourceUrl('https://fonts.googleapis.com/css?family=' + this.fontFamily.replace(' ', '+'));
        }

        return null;
    }
}