我正在尝试将多个（在我的情况下为 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 item 2</custom-list-item-component>
</custom-list-component>
自定义列表组件.component.html
<div [ngClass]="size" class="list-group">
<ng-content></ng-content>
</div>
自定义列表组件.component.ts
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 中那样“只是”应用大小时，它会将w-50应用于列表，这会导致它显示在页面的 50% 上：
但是现在，我想应用第二个“类”，我想将list-group- horizontal 应用到应用了 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和list-group-horizo ntal 不适用于 div，只有它们的名称。这也适用于上述其他选项。它看起来像这样：
我如何将属性的内容应用于 DIV 而不是它们的名称？
提前致谢。