使用角度9中的动态styleUrl创建组件

Question

我想制作一个组件并在另一个组件中多次使用，由于该组件的模板和逻辑始终相同并且样式不同，所以我决定创建一个组件，而不是创建多个组件，而只是动态定义样式文件。

在运行时有一个称为“延迟加载CSS”的通用方法，我将提供一个链接，但问题是该方法会将css文件全局添加，并且由于所有css文件都具有相同的名称，因此该类中的最后一个文件DOM添加了所有组件的效果（也就是说，此方法未使用封装），因此该方法无效。

https://egghead.io/lessons/angular-lazy-load-css-at-runtime-with-the-angular-cli

最后，我在下面放了一张图片，清楚地显示了我想要确切地做的事情。

player.component.ts：

@Component({
  selector: 'app-player',
  templateUrl: './player.component.html',
  styleUrls: ['./player-' + number + '.css']
})
export class PlayerComponent implements OnInit {

  @Input() number: number;

  constructor() {}

  ngOnInit(): void {}

}

player.component.html：

<p class="title">player works!</p>

player-1.css：

.title {
  color: red;
}

player-2.css：

.title {
  color: orange;
}

game.component.html：

<div>
  <app-player [number]="1"></app-player>
  <app-player [number]="2"></app-player>
  <app-player [number]="3"></app-player>
</div>

这怎么办？任何解决方案都值得赞赏。

谢谢。

Answer 1

如果您只是想动态更改颜色，字体大小等，则应重新考虑使用全局主题。

如果布局存在重大差异，则可以选择以下几种方式：

1. 创建基础组件类
   • 包含所有逻辑
   • 从该组件派生其他组件 样式文件。

上述解决方案的优势在于，您还可以为 使代码/指令更具可读性的子组件。 不用数字1,2,3，而是使用darkListComponent，lightListComponent等。

1. 使用ngClass：

   • <div [ngClass]="'my-component-style-' + number"></div>
   • 您仍然可以通过将样式表传递给您的styleUrl来分离样式表 component.ts文件。 （styleUrls: ['theme1.scss','theme2.scss']）
   • 或者您可以在一个文件中声明所有类，以实现最大的样式可重用性。

   my-component-style-1,my-component-style-2 { ...same styling }, my-component-style-2 { color: orange; }

选项2离您更近，您只需更新模板和样式表 为它工作。