Wie wird eine externe Vorlage in Angular 2 Component dynamisch geladen?

Question

In Angular 1 können wir templateUrl verwenden, um verschiedene externe Vorlagen wie unten dynamisch zu laden.

angular.module('testmodule).diretive('testDirective'), function(){ 
    return { 
    restrict: 'EA', 
    replace: true, 
    scope: { 
     data: '@', 
    }, 
    templateUrl: function(element, attrs) { 
     if(attrs.hasOwnProperty("attr")){ 
      return "views/test1.html"; 
     } else { 
     return "views/test2.html"; 
     }      
    } 
} 

Meine Frage ist, wie in unten Angular 2 Komponente die gleiche Funktion zu implementieren?

@Component({ 
    selector: 'testDirective, [testDirective]', 
    template: require('./views/test1.html') or require ('./views/test2.html') 
}) 
export class Angular2Component { 
    ... 
} 

Answer 1

Wenn Sie Komponente geladen werden soll dynamisch dann

@ViewChild('container', { read: ViewContainerRef }) container: ViewContainerRef; 
addComponent(){  
    var comp = this._cfr.resolveComponentFactory(ExpComponent); 
    var expComponent = this.container.createComponent(comp); 
} 

Siehe Angular 2: How to Dynamically Add & remove Components

Wenn Sie nur die Vorlage URL ändern möchten dann so versuchen:

@Component({ 
    selector: 'app-simple-component', 
    templateUrl: "{{tmplUrl}}" 
}) 
class SomeComponent { 
    tmplUrl: string= 'views/test1.html'; 
    constructor() { 
     if(attrs.hasOwnProperty("attr")){ 
      this.tmplUrl ="views/test1.html"; 
     } else { 
     this.tmplUrl ="views/test2.html"; 
     }  
    } 
}