如何在一个单独的文件管理HTML逻辑

Question

我有一段HTML代码，负责根据一定的条件下呈现的清单：

<!-- 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> 

现在，我也有一些可选参数（list.country ）所以我需要检查它是否以前不空。

我相信有一种方法可以将此逻辑用于此HTML文件之外并创建一个可响应逻辑的文件，并且html将相应地显示数据，有人可以分享一个简单的示例基于我的代码完成？

谢谢!!

Answer 1

由于有两个组件，您可以让他们在一个单独的文件，如姓名

component.html 

然后你就可以在导入的index.html像

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

或者你可以抓住从特定部分像

... 
    <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

---

您可以使用ngSwitch当你想显示HTML pieces有条件，

@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'}; 

}