Mehr als eine Vorlage in derselben Komponente in AngularJS 1.5

Question

Kann ich mehr als eine Vorlage in AngularJS 1.5-Komponenten verwenden? Ich habe eine Komponente mit einem Attribut, also möchte ich eine andere Vorlage basierend auf diesem Attributnamen laden. Wie kann ich das Laden von Vorlagen basierend auf dem Attributnamen des Elements erreichen?

jsConfigApp.component('show', { 
templateUrl: 'component/show.html', //How to change it based on attribute value? 
bindings:{ 
    view:"@" 
}, 
controller: function() { 
    console.log(this.view) 
    if (this.view = "user") { 
     console.log("user") 
    } else if (this.view = "user") { 
     console.log("shop") 
    } else { 
     console.log("none") 
    }  
} 
}) 

Danke.

Answer 1

ich zwei Möglichkeiten zur Herstellung von dynamischer Vorlage einer Komponente in 1.5.x:

1) Pass über attr Eigenschaft:

templateUrl: function($element, $attrs) { 
     return $attrs.template; 
} 

2) einen Dienst in Vorlage Spritzen und erhalten Vorlage von dort:

templateURL Funktion:

In getTemplate Funktionsrückgabe template URL basierend auf variable

getTemplate: function(){ 
    if (this.view = "user") { 
      return "user.html"; 
    } else if (this.view = "user") { 
      return "shop.html"; 
    } else { 
     console.log("none") 
    } 
    return "shop.html";  
} 

Pass Variable 'Ansicht' auf Werk zunächst über eine Set-Methode.

Wenn Sie mehr Änderung in HTML-Vorlage benötigen, verwenden Sie die Anweisung zurück und verwenden Sie den Kompilierungsdienst mit mehr Unterstützung.

Answer 2

Was ist mit Vorlage als Parameter zur Komponente übergeben? Zum Beispiel erstellen Komponente wie:

module.component('testComponent', { 
    controllerAs: 'vm', 
    controller: Controller, 
    bindings: { 
     template : '@' 
    }, 
    templateUrl: function($element, $attrs) { 
     var templates = { 
      'first' :'components/first-template.html', 
      'second':'components/second-template.html', 
      'third' :'components/third-template.html' 
     } 
     return templates[$attrs.template]; 
    } 
}); 

Und wie unter Verwendung der Komponente

helfen kann

<test-component template='first'></test-component>