könnten Sie eine Komponente verwenden, wie
beta.17
@Component({
selector: 'dcl-wrapper',
template: '', //`<div #target></div>`
})
export class DclWrapper {
// alternative way of getting a `ViewContainerRef` for an element inside the view instead of the host itself
//@ViewChild('target', {read: ViewContainerRef}) target;
constructor(private dcl:DynamicComponentLoader, private target:ViewContainerRef) {}
@Input() type;
ngOnChanges() {
if(this.cmpRef) {
throw 'currently changing type after the component was added is not supported'
}
this.dcl.loadNextToLocation(this.type, this.target).then((cmpRef) => {
this.cmpRef = cmpRef;
});
}
}
Plunker beta.17
!! < = bet.15 Syntax !!
@Component({
selector: 'dcl-wrapper',
template: `<div #target></div>`
})
export class DclWrapper {
constructor(private elRef:ElementRef, private dcl:DynamicComponentLoader) {}
@Input() type;
ngOnChanges() {
if(this.cmpRef) {
this.cmpRef.dispose();
}
this.dcl.loadIntoLocation(this.type, this.elRef, 'target').then((cmpRef) => {
this.cmpRef = cmpRef;
});
}
}
(von Angular 2 dynamic tabs with user-click chosen components)
Dann in Ihrer Komponente es wie verwenden
@Component({
directives: [DclWrapper],
template: `
<dcl-wrapper [type]="types[node.type]"></dcl-wrapper>
`})
export class ParentComponent {
types = {
application: PmApplicationComponent,
proxy: PmProxyComponent,
part: PmPartComponent,
certificate: PmCertificateComponent,
portal: PmPortalComponent,
};
}
Sie können unverbindlich wie [node]="node"
verwenden für Komponenten DynamicComponentLoader hinzugefügt, aber Sie können Daten zu DclWrapper
passieren und Übergeben Sie die Daten unbedingt an die umschlossene Komponente. Wenn Ihnen dieser Ansatz interessant erscheint, kann ich ein wenig mehr ausführen.
Da DynamicComponentLoader veraltet ist, warte ich auf eine stabilere und besser dokumentierte Lösung. – user3725805
Die aktuelle Methode wird in http://stackoverflow.com/questions/36325212/angular-2-dynamic-tabs-mit-user-click-chosen-components/36325468#36325468 erläutert –