Я пытаюсь применить несколько (в моем случае 2) классов к пользовательскому компоненту, который содержит компонент элемента списка из MDBootstrap:
App.module.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>
Custom-list-component.component.html
<div [ngClass]="size" class="list-group">
<ng-content></ng-content>
</div>
Custom-list-component.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 для div, к которому применен w-50.Я просматривал документы и попробовал все приведенные ниже решения:
<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-Horizontal не применяются к div, только их имена.Это также относится к другим опциям выше.Выглядит это так:
Как бы я применил содержимое DIV, а не их имена?
Спасибозаранее.