使用 SCSS / CSS 进行目标 Angular 绑定答案

【问题标题】：Target Angular binding with SCSS / CSS使用 SCSS / CSS 进行目标 Angular 绑定
【发布时间】：2021-05-20 05:04:16
【问题描述】：

我正在将应用程序从 AngularJS 迁移到 Angular。我刚刚将一个 loading-indicator 组件移到了 Angular，它有一个可选的模态绑定来说明它是否是模态加载器。

实际上，它现在并没有绑定到任何东西，它只是匹配一个 CSS 规则。

HTML

<loading-indicator [modal]="true"></loading-indicator>

SCSS

loading-indicator {    
    &[modal="true"] {
        background: rgba(255,255,255,0.5);
    }
}

上面的 SCSS 以 modal 而不是 [modal] 的属性为目标。

如何定位[modal]？我看到一些答案表明我可以使用 \\ 转义括号，例如&\\[[modal\\]] 但这似乎不起作用。

【问题讨论】：

如果给loading-indicator添加动态类呢？喜欢这个<loading-indicator [modal]="true" [class.my-class]="true(or false)"></loading-indicator>

【解决方案1】：

你不能。因为 [modal]="true" 对于 Angular，它是一个输入，它将被转换为另一个 HTML 属性。

您可以在您的组件中使用modal=true，您可以使用

[modal=true] {
    /*styles*/
}

但是为了封装，你需要把这个样式放在app的根样式上。

将输入模态值绑定到[ngClass]="" 是一个更好的解决方案：

组件ts内部loading-indicator：

@Input() modal;

关于模板使用：

<div [ngClass]="modal ? 'modal-background' : ''"></div>

关于组件的样式：

.modal-background{
   background: rgba(255,255,255,0.5);
}

【讨论】：