我创建了一个名为angular component的{{1}}。
app-button看起来像这样：
template在控制器中，我定义了两个<div class="app-button">
<button class="app-button__btn">{{text}}</button>
</div>
和@Input的{{1}}变量：
modifier在第二个text的{{1}}的{{1}}中，我像这样重复使用export class CanButtonComponent implements OnInit {
@Input() modifier: string;
@Input() text: string = "Default button";
...
}
template：
component此刻，我得到了一个sample-page component和我的默认app-button <app-button></app-button>
，所以它工作正常。
现在，我正在尝试使用两个HTML和button变量。{p>
首先，如果我传递text的值，我将添加第二个类：
Default button我尝试了两种方式：
1。），以@Input为条件，在modifier的{{1}}中直接添加第二个text：
modifier 2。），直接在{{1}的<app-button [modifier]="test"></app-button>
中添加第二个class，其中template在{{1}中调用app-button }：
模板：
ngClass控制器：
<div class="app-button" [ngClass]="{'app-button--{{modifier}}' modifier != ''}">...</div>
两个想法都无法使用传递的class template的{{1}}添加第二个app-button。
第二个文本问题
我也有一个问题，那就是通过传递ngClass的值来覆盖默认的function controller：
<div class="app-button" [ngClass]="getModifier()">...</div>
我已经关注getModifier() {
if (this.modifier) {
return `app-button--${this.modifier}`;
}
}
class：
value希望我的两个问题很清楚。
答案 0 :(得分：2)
执行以下操作时，是说您正在将“ test”属性从父组件传递给子组件：
<app-button [modifier]="test"></app-button>
如果您尝试传递实际的测试字符串，则应这样做：
<app-button [modifier]="'test'"></app-button>
并且：
<app-button [text]="'This is a new text'">...</app-button>
答案 1 :(得分：1)
也许是
<div class="app-button {{ modifier!== '' ? 'app-button--' + modifier : ''}}">{{text}}</div>
然后
<app-button [text]="'This is a new text'" [modifier]="'test'" >...</app-button>
希望这会有所帮助！