Css 当使用多个类应用时,NgClass使用属性名而不是类内容
我正在尝试将多个(在我的示例2中)类应用于自定义组件,该组件包含来自MDBootstrap的列表项组件: 应用程序模块.tsCss 当使用多个类应用时,NgClass使用属性名而不是类内容,css,angular,ng-class,mdbootstrap,Css,Angular,Ng Class,Mdbootstrap,我正在尝试将多个(在我的示例2中)类应用于自定义组件,该组件包含来自MDBootstrap的列表项组件: 应用程序模块.ts <custom-list-component size="w-50"> <custom-list-item-component href="#">list item 1</custom-list-item-component> <custom-list-item-component href="#">list
<custom-list-component size="w-50">
<custom-list-item-component href="#">list item 1</custom-list-item-component>
<custom-list-item-component href="#">list item 2</custom-list-item-component>
</custom-list-component>
import { Component, OnInit, Input } from '@angular/core';
@Component({
selector: 'custom-list-component',
templateUrl: './custom-list-component.component.html',
styleUrls: ['./custom-list-component.component.sass']
})
export class CustomListComponentComponent implements OnInit {
@Input() size: string;
testHorizontal: string = "list-group-horizontal";
constructor() { }
ngOnInit() {
}
}
当我像在自定义列表组件HTML中那样“仅”应用size时,它将w-50应用于列表,从而使其显示在页面的50%上:
但是现在,我想应用第二个“类”,我想对应用了w-50的div应用列表组水平。我一直在查看文档,并尝试了以下所有解决方案:
<some-element [ngClass]="'first second'">...</some-element>
<some-element [ngClass]="['first', 'second']">...</some-element>
<some-element [ngClass]="{'first': true, 'second': true, 'third': false}">...</some-element>
<some-element [ngClass]="stringExp|arrayExp|objExp">...</some-element>
<some-element [ngClass]="{'class1 class2 class3' : true}">...</some-element>
。。。
...
...
...
...
例如,这不起作用:
<div [ngClass]="'size testHorizontal'" class="list-group">
<ng-content></ng-content>
</div>
因为w-50和列表组水平不应用于div,只应用于它们的名称。这也适用于上述其他选项。看起来是这样的:
如何将属性的内容应用于DIV而不是它们的名称
提前感谢。
ngClass
指令需要一个字符串作为类附加(在您的情况下)
所以我们必须用我们的变量组成一个字符串
[ngClass]="size +' '+ testHorizontal"
用两个变量构造一个字符串
size+''+testHorizontal
您是否尝试过这样的[ngClass]=“size+''+testHorizontal”
?我没有,因为ngClass文档中没有提到,但它很有效,谢谢!
[ngClass]="size +' '+ testHorizontal"