是否可以使用门户动态地将组件添加到页面中？

Question

例如，假设我有一个 sidenav，需要根据用户所在的页面向其添加不同的项目。我可以通过门户网站做到这一点吗？

这是我的侧导航。我在考虑开发人员可以在组件中传递的页面，它显示在侧导航的 {{ComponentGoesHere}} 部分

<md-sidenav-container fullscreen>
  <md-sidenav #sidenav mode="push" class="app-sidenav">
    <md-toolbar color="primary">
      <span style="flex: 1 1 auto"></span>
      <button md-icon-button (click)="sidenav.toggle()" class="md-icon-button sidenav-toggle-button" [hidden]="!sidenav.opened">
        <md-icon aria-label="Menu" class="material-icons">close</md-icon>
      </button>
    </md-toolbar>
<div>
**{{ComponentGoesHERE}}**
</div>
<h2>Navigation</h2>
    <md-nav-list>
      <a md-list-item class="sidenav-link" [routerLink]="['/comp1']" (click)="sidenav.toggle()">
        <md-icon md-list-icon>account_balance</md-icon>
        <span class="title" md-line>comp1</span>
        <span md-line class="secondary">test</span>
      </a>
      <a md-list-item class="sidenav-link" [routerLink]="['/comp2']" (click)="sidenav.toggle()">
        <md-icon md-list-icon>android</md-icon>
        <span class="title" md-line>comp2</span>
        <span md-line class="secondary">test</span>
      </a>
    </md-nav-list>
  </md-sidenav>
  <md-toolbar id="appToolbar" color="primary">
    <button md-icon-button (click)="sidenav.toggle()" class="md-icon-button sidenav-toggle-button" [hidden]="sidenav.opened">
                <md-icon aria-label="Menu" class="material-icons">menu</md-icon>
        </button>
    <h1>
      <a class="title-link">My Navigation Bar</a>
    </h1>
    <span style="flex: 1 1 auto"></span>
    <button id="button-logout" md-button>Log Out</button>
  </md-toolbar>
  <router-outlet></router-outlet>
</md-sidenav-container>

编辑：由于 sidenav 是全局的（存在于应用程序组件中），有没有办法查看特定页面加载时是否有门户组件？

假设我导航到一个名为“报告”的页面。门户看到报告有一个报告门户组件并将其加载到侧导航。

然后我导航到交易。门户看到事务有一个搜索功能门户组件并加载它。

然后我转到设置页面，门户发现没有组件，因此它隐藏了自己。

我希望这种方式是可能的，这样我只需要根据需要引用这些组件。

Answer 1

我认为有几种不同的方法可以实现这一目标。

一个是 Angular 路由器。您可以在您的应用程序中拥有多个不同的路由器插座，并且在您的路由器配置中，您可以根据 URL 指定要显示的组件，以及将组件发送到哪个路由器插座。 https://www.techiediaries.com/angular-router-multiple-outlets/

如果您想动态创建组件，可以使用组件工厂解析器来完成。请注意，Angular Factory Resolver 可能有点复杂。 https://angular.io/guide/dynamic-component-loader

第三种可能对您有所帮助的解决方案是来自 Angular Cdk 的 Portal，因此您应该研究一下它们。它们允许您将组件从页面的一部分渲染到另一部分。 https://material.angular.io/cdk/portal/overview

（据我所知，由于 Angular 9 和 Ivy 已经发布，在不久的将来创建动态组件可能会变得更容易。）

Answer 2

我认为动态添加它是不可能的，但是你可以使用 ngIf 来控制它的运行时存在。 如果 ngIf codition 不满足，它不会出现不存在或影响你 html 的其他部分。