javascript - Angular 2 - ngModel 绑定(bind)在动态添加的 DOM 元素中不起作用

Question

考虑下面的代码

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 属性绑定(bind)到它。但生成的输入文本框不与名称绑定(bind)。我是新手，我知道这可能不是正确的方法。如果是这样，实现这一目标的正确方法是什么？

Answer 1

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

通过这种方式，您可以在该组件中根据需要进行绑定(bind)并将其与您的组件连接起来。

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

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

Angular2 DynamicComponentLoader with parameters