我正在开发一个Angular2应用程序,我遇到了一个问题:
我有一组可以使用UI选择的不同对象.每个对象都有一组可以使用UI编辑的选项(不同对象不同).现在,我正在使用DynamicComponentLoader为当前选定的对象插入特定组件,因此它可以正确处理其选项.问题是我不知道如何将当前所选对象的数据绑定到动态插入的选项组件.
@Component({
selector: 'dynamic',
template: `<div>Options:</div>
<div>Property1: <input type="number" /></div>
<div>Property2: <input type="text" /></div>`
// template: `<div>Options:</div>
// <div>Property1: <input type="number" [(ng-model)]="currentSelection.property1" /></div>
// <div>Property2: <input type="text" [(ng-model)]="currentSelection.property1" /></div>`
})
class DynamicComponent {
}
@Component({
selector: 'my-app',
template: `
<div>
<h2>Selected: {{currentSelection.name}}!</h2>
<div #container></div>
</div>
`
})
class App {
currentSelection = {name: 'Selection1', property1: 10, property2: 'test'};
constructor(private loader: DynamicComponentLoader, private elementRef: ElementRef) {
loader.loadIntoLocation(DynamicComponent, elementRef, 'container');
}
}
Run Code Online (Sandbox Code Playgroud)
这是一个帮助您理解我的问题的plunker: