Angular：通过使用 ngClass 传递的 @Input 值覆盖按钮文本并添加 class 时出错

Question

我创建了一个名为 app-button 的 angular component。

template 看起来像这样：

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

在控制器中，我定义了两个 @Input 变量，名为 modifier 和 text:

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

    ...
}

在 component 的 template 秒 sample-page 中，我正在重用我的 component app-button，如下所示：

<app-button></app-button>

目前，我得到一个 HTML button 和我的默认 text Default button，所以它工作正常。

现在我正在尝试使用我的两个 @Input 变量 modifier 和 text。

首先，如果我传递 modifier 的值：

，我会添加第二个 class

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

我试过两种方法：

1.)直接在app-button的template中添加第二个class，条件为ngClass：

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

2.) 直接在 app-button 的 template 中添加第二个 class 并 ngClass 调用 function在 controller:

模板：

<div class="app-button" [ngClass]="getModifier()">...</div>

控制器：

getModifier() {
    if (this.modifier) {
        return `app-button--${this.modifier}`;
    }
}

这两种想法都无法通过使用传递的 modifier string.

的 value 添加第二个 class

第二期有文

我也有一个问题来覆盖默认 button text 也通过传递一个值 @Input text:

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

我已经关注了 console error:

Uncaught Error: Template parse errors:
Parser Error: Unexpected token 'is' at column 6 in [this is a new text]

希望我的两个问题都清楚了。

Answer 1

当您执行以下操作时，您是在将 "test" 属性从父组件传递给子组件：

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

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

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

并且：

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

Answer 2

也许这个

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

然后

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

希望这会有所帮助！

Angular: Errors with passed @Input values to override button text and add class by using ngClass