Angular Typescript：添加从数组读取的动态 CSS

Posted 2023-03-06

【中文标题】Angular Typescript：添加从数组读取的动态 CSS

【英文标题】：Angular Typescript: Add Dynamic CSS reading from Array

【发布时间】：2020-04-03 03:19:57

【问题描述】：

如何动态添加从 Angular 数组读取的 SCSS 样式？ 我们有一个包含以下成员的角度数组。

class ItemList
    productName: string;
    highlight: boolean;

它包含成员food, true, car, true, book, false, desk, true, etc 追随成员真实，需要一定的造型。 数组中的所有成员，如果为 true，则应创建以下内容。

SCSS：

.food
background-color:blue


.car
background-color:blue


.desk
background-color:blue

【问题讨论】：

您不能在运行时“添加” SCSS 规则，因为 SCCS 在构建时编译为 CSS。您能否更详细地解释您的方法的用例？

【参考方案1】：

考虑到这是您的组件 TS：

import  Component, VERSION  from '@angular/core';
import  Item  from './model';

@Component(
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
)
export class AppComponent 
  name = 'Angular ' + VERSION.full;
  items: Array<Item> = [
     productName: 'food', highlight: true,
     productName: 'car', highlight: true,
     productName: 'book', highlight: false,
     productName: 'desk', highlight: true
  ];

这是你的 CSS 文件：

.title 
  font-family: sans-serif;


.food 
  background-color:blue


.car 
  background-color:blue


.desk 
  background-color:blue

您可以使用ngClass 来完成这项工作：

<ul>
  <li 
    *ngFor="let item of items"
    [ngClass]="item.highlight ? item.productName : ''">
     item.productName 
  </li>
</ul>

---

这里有一个Working Sample Code 供您参考。

【讨论】：

如何将 blob 作为 blob 传递给子组件，我知道 ngfor，只是不希望它只绑定到 li 行元素，请参阅我在子组件中有以下元素，将使用 :host稍后应用生成的样式