javascript - 在 Angular 9 中创建具有动态 styleUrls 的组件

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. 创建一个基础组件类
   • 包含所有逻辑
   • 使用不同的方式从此组件派生出其他组件样式文件。

上述解决方案的好处是您还可以为子组件将使代码/指令更具可读性。您将拥有 darkListComponent、lightListComponent 等，而不是使用数字 1、2、3。

使用 ngClass:

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

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

选项 2 更接近您的选择，您只需更新模板和样式表让它发挥作用。