Wie Variable verwenden, um TemplateUrl in Angular2 zu definieren

Question

Ich möchte die Komponente templateUrl mit einer Variablen festlegen, aber es funktioniert nicht.

Wohin ich auch schaue, ich kann nur Lösungen für Angular 1.X sehen, es ist wirklich frustrierend. Ich schaute in die Browser-Konsole und fand heraus, dass {{article.html}} nicht einmal aufgelöst wird. Es liest so wie es ist. Es funktioniert völlig gut, wenn ich den Pfad selbst setze, also weiß ich, dass das Problem nirgendwo anders als hier ist.

Answer 1

Ich denke, Sie sollten dynamische Komponente laden, um das zu tun.

Lassen Sie uns sagen, dass wir eine JSON-Datei haben:

{ 
    "title": "My first article", 
    "html": "app/articles/first.html" 
} 

Wir könnten schaffen HtmlOutlet-Direktive, die Komponente dynamicallу mit gewünschten templateUrl schaffen:

@Directive({ 
    selector: 'html-outlet' 
}) 
export class HtmlOutlet { 
    @Input() html: string; 

    constructor(private vcRef: ViewContainerRef, private compiler: Compiler) {} 

    ngOnChanges() { 
    const html = this.html; 
    if (!html) return; 

    @Component({ 
     selector: 'dynamic-comp', 
     templateUrl: html 
    }) 
    class DynamicHtmlComponent { }; 

    @NgModule({ 
     imports: [CommonModule], 
     declarations: [DynamicHtmlComponent] 
    }) 
    class DynamicHtmlModule {} 

    this.compiler.compileModuleAndAllComponentsAsync(DynamicHtmlModule) 
     .then(factory => { 
     const compFactory = factory.componentFactories 
       .find(x => x.componentType === DynamicHtmlComponent); 
     const cmpRef = this.vcRef.createComponent(compFactory, 0); 
     cmpRef.instance.prop = 'test'; 
     cmpRef.instance.outputChange.subscribe(()=>...);; 
    }); 
    } 
} 

Und dann verwenden Sie es mögen:

<html-outlet [html]="article?.html"> 

Wo html ist Pfad zum Artikel html

weitere Details in diesem Plunkr