Html Angular 9-从数据库导入字体名称和字体url

在数据库中，我有字体名和字体url，这是用户可以从UI更改的数据

在我的angular应用程序中，我应该从API获取数据并将其存储在css中，这样我的应用程序就可以使用选定的字体运行

我试图将自定义变量解析为styles.css，就像我解析按钮颜色一样，但在本例中它不起作用

你能帮我吗？

完整的例子：

这是我的NodeJs服务器：

这里我有两个谷歌字体

const fonts = [
    {
        id: 1,
        name: `Quicksand`,
        url: 'https://fonts.googleapis.com/css?family=Quicksand'
    },
    {
        id: 2,
        name: `Anton`,
        url: 'https://fonts.googleapis.com/css?family=Anton'
    }
]

app.get('/', (req, res, next) => {
    res.send(fonts)
})

const PORT = process.env.PORT || 3000
app.listen(PORT, () => {
    console.log(`Server is running on PORT : ${PORT}`)
})

在Angular Client中：

我创建了一个字体类：

export class Font {
  public id: number;
  public name: string;
  public url: string;
}

app.component.ts

  fonts$: Observable<Font>;
  constructor(private http: HttpClient) { }

  ngOnInit(): void {
    this.fonts$ = this.http.get<Font>('http://localhost:3000')
  }

  applyFontToBody(font: Font) {
    const id = `font-${font.name}-${font.id}`;

    if (!document.getElementById(id)) {
      let style = document.createElement('link');
      style.setAttribute('href', font.url);
      style.setAttribute('rel', 'stylesheet')
      style.setAttribute('id', id)
      document.head.appendChild(style);
    }
    
    document.getElementsByTagName('body')[0].style.fontFamily = font.name;
  }

app.component.html

 <div class="border p-4">
    <h5>
      In App Component
    </h5>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Illum consectetur enim, natus sed dicta modi nemo
    </p>
  </div>

  <ng-container *ngIf="(this.fonts$ | async) as fonts">
    <table class="table table-striped">
      <thead>
        <tr>
          <td>#</td>
          <td>Name</td>
          <td>Url</td>
          <td>Action</td>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let item of this.fonts; let idx=index">
          <td>{{idx+1}}</td>
          <td>{{item.name}}</td>
          <td>{{item.url}}</td>
          <td>
            <button class="btn btn-sm btn-primary" (click)="applyFontToBody(item)" type="button">
              Apply To Body
            </button>
          </td>
        </tr>
      </tbody>
    </table>
  </ng-container>

---

一般来说，加载CSS数据后，您应该能够以某种方式访问应用程序根标记，并通过脚本在其中应用样式。您可能需要查看RenderR2的set-style或set-class方法。在主应用程序的组件中应用它们。在这种情况下，我如何从应用程序的组件访问css变量？在应用程序的组件呈现后，我将在某些按钮上单击获取字体url。我应该从哪个组件运行该url？在每个组件中，您都可以这样做，因为您正在将字体应用于主体，我尝试过，但前端没有更改。是否有机会直接在index.html中设置，而不是硬编码？您可以进行stackblitz吗？这是stackblitz预览版的巨大应用程序：\