Wie HTML-Logik in einer separaten Datei

Question

ich habe ein Stück HTML-Code, der für die Präsentation eine Liste basierend auf bestimmten Bedingungen verwalten:

<!-- Show list only if there are more than 5 results --> 
     <div list.numberOfResults > 10"> 
      <b>Name: </b>{{list.name}} <b>ID: </b>{{list.id}} 
      <b>Country: </b>{{list.country}} 
     </div> 

<!-- Show list only if there are less than 10 results --> 
     <div list.numberOfResults < 10"> 
      <b>Name: </b>{{list.name}} <b>ID: </b>{{list.id}} 
      <b>Country: </b>{{list.country}} 
     </div> 

Jetzt habe ich auch einige optionale Parameter haben (list.country) also muss ich auch vorher prüfen ob es nicht leer ist.

Ich glaube, es gibt eine Möglichkeit, diese Logik außerhalb dieser HTML-Datei zu nehmen und eine Datei zu machen, die verantwortlich für die Logik ist und die HTML die Daten entsprechend präsentiert, kann jemand bitte ein einfaches Beispiel dafür, wie dies sein kann basierend auf meinem Code gemacht?

danke !!

Answer 1

Seit zwei Komponenten Es gibt Sie können sie in einer separaten Datei wie Name halten

component.html 

Dann können Sie in index.html importieren wie

<link rel="import" href="component.html" > 

Oder Sie können einfach bestimmten Teil greifen aus die Datei wie

... 
    <script> 
    var link = document.querySelector('link[rel="import"]'); 
    var content = link.import; 

    // Grab DOM from component.html's document. 
    var el = content.querySelector('.component'); 

    document.body.appendChild(el.cloneNode(true)); 
    </script> 
</body> 

Answer 2

DEMO: https://plnkr.co/edit/6atoS1WOK5RzKSmNeR8n?p=preview

---

können Sie ngSwitch verwenden, wenn Sie HTML pieces bedingt zeigen wollen,

@Component({ 
    selector: 'my-app', 
    template: ` 
    <div [ngSwitch]="list.numberOfResults>10">  // here 

     <div *ngSwitchCase ="true">     // here 
      <b> Template1 </b><br> 
      <b>Name: </b>{{list.name}} <br> 
      <b>ID: </b>{{list.id}} <br> 
      <b>Country: </b>{{list.country}} 
     </div> 


     <div *ngSwitchCase ="false">     // here 
      <b> Template2 </b><br> 
      <b>Name: </b>{{list.name}} <br> 
      <b>ID: </b>{{list.id}} <br> 
      <b>Country: </b>{{list.country}} 
     </div> 

    <div> 
    `, 
}) 
export class App { 

    list={numberOfResults:2,name:'myList',id:1,country:'USA'}; 

}