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

【问题标题】：Set 2 way binding property to Host Element Angular 4将 2 路绑定属性设置为 Host Element Angular 4
【发布时间】：2017-10-19 23:34:52
【问题描述】：

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

<my-comp></mycomp>

我们想把上面的标记替换成看起来像

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

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

在 Angular 1 中，我们使用文本替换宿主元素标记并执行 $compile(scope)。 Angular 4 中是否有类似的方法使用动态加载？

【问题讨论】：

【解决方案1】：

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

还有一个简单的例子

在您的组件中，从 Angular Core 导入“输入”

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

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

@Input() loading:boolean = false;

然后，在您的 HTML 中定义绑定。

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

请记住，括号内的“加载”将与输入变量的名称匹配。

【讨论】：