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

}

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

2 个答案: