我正在开发一个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');
}
}
Here是一个帮助你理解我的问题的朋友：
使用angular2和Rxjs,“
Observables”几乎总是答案.
如果我正确地理解了您的问题,您需要使您的DynamicComponent成为“Observer”,并且您的容器“Observable或更好的Subject(如果您的容器需要订阅另一个可观察者才能接收选择)”.然后,加载动态组件后,将其订阅到容器.
每当您的容器上的选择更改时,都会将新的选择推送给订阅者.这样,您可以加载多个动态组件,并且都会接收到您的推送.
集装箱：
class App {
currentSelection = {};
selections = [
{name: 'Selection1',property2: 'test'},{name: 'Selection2',property1: 20,property2: 'test2'}
];
subject:Subject<any> = new Subject();
constructor(private loader: DynamicComponentLoader,private elementRef: ElementRef) {
}
ngOnInit(){
this.loader.loadIntoLocation(DynamicComponent,this.elementRef,'container',this.injector)
.then(compRef =>this.subject.subscribe(compRef.instance));
// subscribe after loading the dynamicComponent
}
// set the new selection and push it to subscribers
changeSelection(newSelection){
this.currentSelection = newSelection;
this.subject.next(this.currentSelection);
}
}
观察员：
class DynamicComponent implements Observer{
public currentSelection = {};
next(newSelection){
this.currentSelection = newSelection;
}
}
这是您的plunker在我的修改后工作,“如果我将导入更改为最新的角β6”
我知道这是一个很老的问题.但希望有人会从这个答案中受益.
