2016-04-29 13 views
1

Ich habe den folgenden HTML-Code:Angular2, wie Komponente abhängig von Wert ist

<pm-application [node]="node" *ngIf="node.type ==='application'"></pm-application> 
<pm-proxy [node]="node" *ngIf="node.type ==='proxy'"></pm-proxy> 
<pm-part [node]="node" *ngIf="node.type ==='part'"></pm-part> 
<pm-certificate [node]="node" *ngIf="node.type ==='certificate'"></pm-certificate> 
<pm-portal [node]="node" *ngIf="node.type ==='portal'"></pm-portal> 

Es ist nicht schön aussehen und es gibt viele andere Arten, so dass die Liste wächst. Gibt es einen leichteren Weg? Etwas wie:

<{{node.type}} [node]="node"><{{node.type}}> 

Antwort

1

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.

+0

Da DynamicComponentLoader veraltet ist, warte ich auf eine stabilere und besser dokumentierte Lösung. – user3725805

+0

Die aktuelle Methode wird in http://stackoverflow.com/questions/36325212/angular-2-dynamic-tabs-mit-user-click-chosen-components/36325468#36325468 erläutert –

0

Ich bin mir nicht genau sicher, ob dies in Angular 2 möglich ist, aber in v1 könnten Sie restraint property in Direktiven verwenden, um eine CSS-Klasse oder ein css anstelle des Knotennamens zu verwenden.

Wenn dies nicht möglich ist, würde ich erstellen Sie einfach eine super-Komponente

<pm-supercomponent [node]="node"/> 

und haben den Schalter innerhalb dieser Komponente. Dann müssen Sie es zumindest nicht immer wiederholen.

Verwandte Themen