Javascript 如何在单独的文件中管理html逻辑

我有一段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>

10">
名称：{{list.Name}}ID:{{list.ID}
国家：{{list.Country}
由于有两个组件，您可以将它们保存在一个单独的文件中，如name

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>

。。。
var link=document.querySelector（'link[rel=“import”]”）；
var content=link.import；
//从component.html的文档中获取DOM。
var el=content.querySelector（'.component'）；
document.body.appendChild（el.cloneNode（true））；
演示：


当您想要有条件地显示HTML片段时，可以使用
ngSwitch

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

}

@组件({
选择器：“我的应用程序”，
模板：`
//这里
//这里
模板1

名称：{{list.Name}}

ID:{{list.ID}}

国家：{{list.Country}
//这里
模板2

名称：{{list.Name}}

ID:{{list.ID}}

国家：{{list.Country}
`,
})
导出类应用程序{
列表={numberOfResults:2，名称：'myList'，id:1，国家：'USA'}；
}