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

Answer 1

不支持动态创建HTML，包括绑定。

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

Answer 2

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

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

这可以使用DynamicComponentLoader完成。创建新组件时，将返回Promise，您可以访问实例化组件以添加参数或挂接EventEmitter。

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

Angular2 DynamicComponentLoader with parameters

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

2 个答案: