我想制作一个组件并在另一个组件中多次使用它,由于该组件的模板和逻辑始终相同且样式不同,所以我决定创建单个组件而不是创建多个组件,只需动态定义样式文件。
有一个名为“在运行时延迟加载 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>
如何做到这一点?任何解决方案都值得赞赏。
谢谢。
最佳答案
如果您只想动态更改颜色、字体大小等,您应该重新考虑使用全局主题。
如果存在重大布局差异,您有多种选择:
- 创建一个基础组件类
- 包含所有逻辑
- 使用不同的方式从此组件派生出其他组件 样式文件。
上述解决方案的好处是您还可以为 子组件将使代码/指令更具可读性。 您将拥有 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 更接近您的选择,您只需更新模板和样式表 让它发挥作用。
关于javascript - 在 Angular 9 中创建具有动态 styleUrls 的组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60882070/