时间戳

首页 > 解决方案 > Angular 创建多个模板实例

angular - Angular 创建多个模板实例

问题描述

我有一个选项卡控件，其中包含动态生成的选项卡，我的标记中有类似的内容，用于获取当前选项卡的正确模板。

      <ng-container *ngIf="(tabSelected | async); let selectedTab">
        <view-area [template]="getTemplate(selectedTab)"></view-area>
      </ng-container>

      <ng-template name="dashboard">
        <dashboard></dashboard>
      </ng-template>

      <ng-template name="users">
        <users></users>
      </ng-template>

      <ng-template name="group-builder">
        <group-builder></group-builder>
      </ng-template>

这很好用，但是其中一些模板需要一些时间来初始化，而且我可以有多个使用相同模板的选项卡，因此切换选项卡可能会有一点延迟。关于如何有效地创建同一模板的多个模板实例的任何想法？

我知道通常您只会用自己的选项卡枚举选项卡，<ng-content>但这里的选项卡是一个完全独立的组件。

标签： angulartypescript

解决方案

如果有人需要，这实际上很容易。基本上ng-container用 a枚举所有选项，ngTemplateOutlet并设置display : none为隐藏或display : block选定项目。然后，这将缓存所有呈现的模板，并且它们将在切换选项卡时立即显示而不会丢失状态。

<ng-container *ngFor="let sideBarOption of (sideBar.allItems | async)">
    <div [ngStyle]="getTemplateVisibility(tabSelected.value , sideBarOption)">
        <ng-container [ngTemplateOutlet]="getTemplate(sideBarOption)"></ng-container>
    </div>
</ng-container>

<ng-template name="dashboard">
    <dashboard></dashboard>
</ng-template>

<ng-template name="users">
    <users></users>
</ng-template>

<ng-template name="group-builder">
    <group-builder></group-builder>
</ng-template>

并在组件 ts 文件中

public getTemplateVisibility(selected: SidebarOption, sideBarOption: SidebarOption): any {
    return {
      display: selected === sideBarOption ? 'block' : 'none'
    };
  }

推荐阅读