将2路绑定属性设置为Host Element Angular 4

Question

有没有办法动态地将2路绑定[（somemodel）]属性添加到Angular 4中的Host元素？

<my-comp></mycomp>

我们想将上面的标记替换为

<my-comp [(somemodel)]="modelvalue" ></mycomp> 

在运行时动态。我们知道@HostBinding不支持这一点，因为我们看到的最常见的例子是向宿主添加类或属性。 有没有办法用Angular 4替换这样的主机元素？ 如果有人能指出我们正确的方向，我们愿意动态加载模板/组件。

在Angular 1中，我们习惯用我们的文本替换主元素标记并执行$ compile（范围）。 Angular 4中是否有类似的方法使用动态加载？

Answer 1

我认为您正在寻找的是Angular 4中的@Input。它允许您在组件上定义变量并从HTML接收它的值。以下是Angular Docs on Input/Output

快速举例

在您的组件中，导入＆＃39;输入＆＃39;来自Angular Core

import { Input } from '@angular/core';

然后，定义输入变量。在这里，我是一个布尔值的加载变量。

@Input() loading:boolean = false;

然后，在HTML中定义绑定。

<loader [loading]="loading"></loader>

请记住＆＃39; loading＆＃39;括号内部将与输入变量的名称匹配。