2

我创建了一个angular component被调用的app-button.

template看起来像这样：

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

在控制器中，我定义了两个名为and的@Input变量：modifiertext

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我的默认值text Default button，所以它工作正常。

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

首先，如果我传递一个值，我会添加第二个类modifier：

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

我尝试了两种方式：

1.）class直接在条件template中添加第二个：app-buttonngClass

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

2.)在调用中class直接添加第二个：templateapp-buttonngClassfunctioncontroller

模板：

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

控制器：

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

这两个想法都不能通过class使用value传递的modifier string.

文本的第二个问题

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]

希望我的两个问题很清楚。

4

2 回答 2

2

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

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

如果你试图传递实际的测试字符串，你应该这样做：

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

和：

<app-button [text]="'This is a new text'">...</app-button>
于 2018-11-19T13:24:23.433 回答
1

也许这

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

然后

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

希望这会有所帮助！

于 2018-11-19T13:29:05.750 回答