gpt4 book ai didi

css - NgClass 在使用多个类申请时使用属性名而不是类内容

转载 作者:行者123 更新时间:2023-11-28 16:57:54 25 4
gpt4 key购买 nike

我正在尝试将多个(在我的例子中是 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>

自定义列表组件.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 中那样“只是”应用 size 时,它会将 w-50 应用于列表,这会导致它显示在 50页面的百分比:

enter image description here

但是现在,我想应用第二个“类”,我想将 list-group-horizo​​ntal 应用于应用了 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-50list-group-horizo​​ntal 没有应用到 div,只有它们的名字。这也适用于上述其他选项。它看起来像这样:

enter image description here

我如何将属性的内容应用到 DIV 而不是它们的名称?

提前致谢。

最佳答案

ngClass 指令需要一个字符串作为类附加(在您的情况下)。

所以我们必须用我们的变量创建一个字符串。

[ngClass]="size +' '+ testHorizontal"

用两个变量构造一个字符串 size +' '+ testHorizo​​ntal

关于css - NgClass 在使用多个类申请时使用属性名而不是类内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55395262/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com