Question

我正在尝试使用Angular Router将.ts文件中的参数链接到HTML模板的CSS文件中，例如“ background-image：{{image}}”。

我正在使用Angular Material卡组件和* ngFor来显示每个人的个人资料。我试图根据列表（.ts）文件中设置的参数使用Angular Router显示不同的标题图像（写为“背景图像”）。

但是，'background-image'是在CSS文件中设置的，我找不到从CSS .ts文件中使用参数的方法。

我想将图像URL和其他参数一起放在.ts文件中，然后将其链接到CSS文件中，如下所示：

background-image: url('{{ header }}')

或通过为每个人创建自定义课程，例如：

class="{{ customclass }}"

这是卡的模板：

<div class="grid">
<div *ngFor="let busker of buskers; index as buskerId">
<mat-card class="card">
  <mat-card-header>

    <!-- IMPORTANT -->
    <div mat-card-avatar class="header-image"></div>

    <mat-card-title>{{ busker.name }}</mat-card-title>
  </mat-card-header>
</mat-card>
<div>

这是个人资料图片（标题图像）的CSS类：

.header-image {
  background-image: url('https://yt3.ggpht.com/a/AGF-l784OUQLYfEn7Hiwd- 
  CGG0vXtwwALwmrPolw9A=s900-mo-c-c0xffffffff-rj-k-no');
  background-size: cover;
}

我希望网格中每个配置文件的背景图片URL都不同。

有没有办法在CSS中使用Angular路由器参数？

0 个答案: