Angular 2 - ngModel 绑定在动态添加的 DOM 元素中不起作用答案

【问题标题】：Angular 2 - ngModel binding not working in dynamically added DOM elementAngular 2 - ngModel 绑定在动态添加的 DOM 元素中不起作用
【发布时间】：2016-02-24 19:53:37
【问题描述】：

考虑下面这段代码

import {Component, OnInit} from 'angular2/core';
import {bootstrap, BrowserDomAdapter} from 'angular2/platform/browser';

@Component({
selector: 'app',
template: `<div id="test"></div>
<br>Current Value is: {{ name }}`
})
class App implements OnInit{
public name = "Hello World!";
constructor() {}
ngOnInit(){
    $("#test").append("<input type='text' [(ngModel)]='name'      placeholder='Enter Name' />");
}
}

bootstrap(App);

如您所见，我正在向 DOM 动态添加模板并将 name 属性绑定到它。但是生成的输入文本框不与名称绑定。我是新手，我知道这可能不是正确的方法。如果是这样，实现这一目标的正确方法是什么？

【问题讨论】：

模板的动态性如何？你能简单地将你的动态模板放在它自己的子组件中吗？然后在父组件中，您可以使用NgIf 有条件地从 DOM 中添加/删除它。您可以在子组件上放置一个输入属性和一个输出属性来获取数据。
操作！我的错，我刚刚解决了我的问题，我觉得很愚蠢。我使用 ngFor 生成多个输入字段并绑定它们的值。谢谢。

标签： javascript angular

【解决方案1】：

如果您想要动态模板，我建议使用您要插入的 HTML 创建组件并动态实例化它。

通过这种方式，您可以在该组件中随意进行绑定并将其与您的组件挂钩。

这可以通过 DynamicComponentLoader 来完成。当您创建一个新组件时，会返回一个 Promise，您可以访问实例化的组件以添加参数或连接 EventEmitters。

有关更多详细信息，您可以查看我的问题，该问题已得到解答。我用一个可行的解决方案更新了我的问题。

Angular2 DynamicComponentLoader with parameters

【讨论】：

【解决方案2】：

不支持即时创建 HTML，包括绑定。

添加 HTML 后，您可以查询元素并强制添加事件处理程序，以获取有关输入更改的通知，并在 name 更改时强制更新值。

【讨论】：

有道理。可以举个例子吗？
你不应该在 Angular2 中这样做。不鼓励使用 jQuery 和直接 DOM 访问。这就是我自己不玩这些东西的原因。你真的需要这个吗？您可以注入 constructor(private elementRef:ElementRef) 并使用 elementRef.nativeElement 访问 DOM。从那里开始，它的纯 HTML/JS 与 Angular 无关。
所以你是说如果我使用 ElementRef 服务而不是使用 jquery 来操作 DOM，那么 ngModel 会起作用吗？
不，我说的是不应该使用 jQuery 并且 ngModel 或其他指令、组件或绑定根本不能用于动态添加的 HTML。您应该重新考虑您的方法并使用例如 DynamicComponentLoader ，如上面对您问题的评论中提到的那样。