angular - Angular2/Ionic 2 动态组件属性

Question

我想就这个问题寻求帮助。我正在研究 angular 2 和 ionic 中的动态组件：请检查以下场景。

我有组件名称按钮组件：

<button-component [label]="I'm a button" **small**></button-component>

small - 必须在按钮元素中动态输入，如 big、 large。

在按钮组件视图文件中，我有：

 <button "the single  attribute must appear here like small">{{label}}</button>

输出将是<button small>I'm a button</button>

我尝试了 angular 2 中的所有属性绑定，但这是离子属性。

如何使用 ionic 2 和 angular 2 做到这一点。通过动态使用单个属性属性。

提前致谢。

Answer 1

与 Angular 2 相同，只需发送一个size属性并将其设置为small

<button-component label="'I'm a button'" size="'small'"></button-component>

然后在您的按钮组件中：

@Input() size;

并在您的模板中：

<button [class]="size">{{label}}</button>

并在 CSS 中声明您想要的样式，例如：

.small {
...
}

.big {
..
}