Javascript 角度：传递@Input值以覆盖按钮文本并使用ngClass添加类的错误

我创建了一个名为

应用程序按钮的
角度组件

模板
如下所示：

<div class="app-button">
    <button class="app-button__btn">{{text}}</button>
</div>

<app-button></app-button>

<app-button [modifier]="'test'"></app-button>

在名为
示例页面
的第二个
组件的
模板
中，我正在重复使用我的
组件
应用程序按钮
，如下所示：

<div class="app-button">
    <button class="app-button__btn">{{text}}</button>
</div>

<app-button></app-button>

<app-button [modifier]="'test'"></app-button>

我试了两种方法：

1。）使用
ngClass
条件，直接在
app按钮的
模板中添加第二个
class
：

<div class="app-button" [ngClass]="{'app-button--{{modifier}}' modifier != ''}">...</div>

控制器：

这两个想法都无法通过使用传递的
修饰符的
值来添加第二个
类

第二期，附文本

我还存在一个问题，即通过为
@Input text
传递一个值来覆盖默认的
按钮
文本
：

export class CanButtonComponent implements OnInit {
    @Input() modifier: string;
    @Input() text: string = "Default button";

    ...
}

<app-button [text]="This is a new text">...</app-button>

希望我的两个问题是清楚的。
当您执行以下操作时，您表示您正在将“test”属性从父组件传递给子组件：

<app-button [modifier]="test"></app-button>



如果您试图通过实际的测试字符串，您应该这样做：

<div class="app-button">
    <button class="app-button__btn">{{text}}</button>
</div>

<app-button></app-button>

<app-button [modifier]="'test'"></app-button>



以及：

。。。
可能是这样

<div class="app-button {{ modifier!== '' ? 'app-button--' + modifier : ''}}">{{text}}</div>

{{text}

然后

。。。

希望这会有帮助
 疯狂，现在它工作了！我想，如果我不将属性放入{{}，它将被识别为默认字符串，但是{{}似乎只是为了获取属性的值。很高兴知道，谢谢，伙计！将条件更改为