我在用一堆*如果，有更好的方法吗？

Question

我有一个边导航，它不是路由，而是填充内容区域。我在模板上使用了一大堆*ngIf，但我想知道是否有更好的方法？也许类似于我将从模板中显示代码，您将能够更好地理解我所要求的内容。

模板是：

<div class="container-fluid">
  <div class="row">
    <div class="d-none d-md-block col-md-2 sidemenu">
      <app-sidemenu [state]="displayContent" (event)="setDataFromSideMenu($event)"></app-sidemenu>
    </div>
    <div class="col-md-10 main-content">
      <div class="jumbotron">
        <h1>Angular Project 1</h1>
        <div *ngIf="display === 'introduction'">
          <app-introduction></app-introduction>
        </div>
        <div *ngIf="display === 'download'">
          <app-download></app-download>
        </div>
        <div *ngIf="display === 'contents'">
          <app-contents></app-contents>
        </div>
        <div *ngIf="display === 'browser-and-devices'">
          <app-browser-and-devices></app-browser-and-devices>
        </div>
        <div *ngIf="display === 'javascript'">
          <app-javascript></app-javascript>
        </div>
        <div *ngIf="display === 'theming'">
          <app-theming></app-theming>
        </div>
        <div *ngIf="display === 'build-tools'">
          <app-build-tools></app-build-tools>
        </div>
        <div *ngIf="display === 'webpack'">
          <app-webpack></app-webpack>
        </div>
        <div *ngIf="display === 'accessibility'">
          <app-accessibility></app-accessibility>
        </div>
        <div *ngIf="display === 'overview'">
          <app-overview></app-overview>
        </div>
        <div *ngIf="display === 'grid'">
          <app-grid></app-grid>
        </div>
        <div *ngIf="display === 'media-object'">
          <app-media-object></app-media-object>
        </div>
        <div *ngIf="display === 'utilities-for-layout'">
          <app-utilities-for-layout></app-utilities-for-layout>
        </div>
        <div *ngIf="display === 'reboot'">
          <app-reboot></app-reboot>
        </div>
        <div *ngIf="display === 'typography'">
          <app-typography></app-typography>
        </div>
        <div *ngIf="display === 'code'">
          <app-code></app-code>
        </div>
        <div *ngIf="display === 'images'">
          <app-images></app-images>
        </div>
        <div *ngIf="display === 'tables'">
          <app-tables></app-tables>
        </div>
        <div *ngIf="display === 'figures'">
          <app-figures></app-figures>
        </div>
        <div *ngIf="display === 'alerts'">
          <app-alerts></app-alerts>
        </div>
        <div *ngIf="display === 'badge'">
          <app-badge></app-badge>
        </div>
        <div *ngIf="display === 'breadcrumb'">
          <app-breadcrumb></app-breadcrumb>
        </div>
        <div *ngIf="display === 'buttons'">
          <app-buttons></app-buttons>
        </div>
        <div *ngIf="display === 'button-group'">
          <app-button-group></app-button-group>
        </div>
        <div *ngIf="display === 'card'">
          <app-card></app-card>
        </div>
        <div *ngIf="display === 'carousel'">
          <app-carousel></app-carousel>
        </div>
        <div *ngIf="display === 'collapse'">
          <app-collapse></app-collapse>
        </div>
        <div *ngIf="display === 'dropdowns'">
          <app-dropdowns></app-dropdowns>
        </div>
        <div *ngIf="display === 'forms'">
          <app-forms></app-forms>
        </div>
        <div *ngIf="display === 'input-group'">
          <app-input-group></app-input-group>
        </div>
        <div *ngIf="display === 'jumbotron'">
          <app-jumbotron></app-jumbotron>
        </div>
        <div *ngIf="display === 'list-group'">
          <app-list-group></app-list-group>
        </div>
        <div *ngIf="display === 'modal'">
          <app-modal></app-modal>
        </div>
        <div *ngIf="display === 'navs'">
          <app-navs></app-navs>
        </div>
        <div *ngIf="display === 'navbar'">
          <app-navbar></app-navbar>
        </div>
        <div *ngIf="display === 'pagination'">
          <app-pagination></app-pagination>
        </div>
        <div *ngIf="display === 'popovers'">
          <app-popovers></app-popovers>
        </div>
        <div *ngIf="display === 'progress'">
          <app-progress></app-progress>
        </div>
        <div *ngIf="display === 'scrollspy'">
          <app-scrollspy></app-scrollspy>
        </div>
        <div *ngIf="display === 'tooltips'">
          <app-tooltips></app-tooltips>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

很高兴你在考虑这件事。您可以采取以下三种方法：

第一个是ngSwitch。如果ngIf是JS if()语句，则ngSwitch是switch ... case语句。相当不言自明。

下一个是动态组件加载程序。这是一个组件，它可以采用某种@Input，并根据某种标准动态地在其内部呈现一个不同的组件。您将需要一个逻辑组件、该组件中的一个TemplateRef (通常来自一个指令)来将所呈现的组件附加到并注入一些服务。关于如何做到这一点，下面是是一个很好的指南。我强烈建议探索动态组件加载，即使它不是正确的解决方案，因为它提供了许多深入了解角度如何在幕后工作。

第三个取决于你的设置。在我看来，基于条件集中只有一次为真的条件来有条件地显示组件，本质上就是完成了路由器应该做的事情。与其绑定到所有这些声明，为什么不为每条语句制定一条路线呢？这样，您就可以将每个可能的display值作为可重用的路由。路由器是层次结构的，因此您可以在父-子关系中拥有多个<router-outlet>。您也可以在同一个模板中拥有多个命名网点。您甚至可以将上下文传递给每条路由。