Блог

У меня есть элемент управления tabs с вкладками, которые генерируются динамически, и что-то вроде этого в моей разметке для получения правильного шаблона для текущей вкладки.

       <n&-container *n&If="(tabSelected | async); let selectedTab"&&t;
        <view-area [template]="&etTemplate(selectedTab)"&&t;</view-area&&t;
      </n&-container&&t;

      <n&-template name="dashboard"&&t;
        <dashboard&&t;</dashboard&&t;
      </n&-template&&t;

      <n&-template name="users"&&t;
        <users&&t;</users&&t;
      </n&-template&&t;

      <n&-template name="&roup-builder"&&t;
        <&roup-builder&&t;</&roup-builder&&t;
      </n&-template&&t;
  

Это работает нормально, но для инициализации некоторых из этих шаблонов требуется некоторое время, и у меня может быть несколько вкладок, использующих одни и те же шаблоны, поэтому переключение вкладок может немного задерживаться. Есть идеи о том, как я могу эффективно создать несколько экземпляров шаблона для одного и того же шаблона?

Я знаю, что обычно вы просто перечисляете вкладки с их собственными <n&-content&&t; но вкладки здесь являются совершенно отдельным компонентом.

На самом деле это было действительно просто, если кому-то это нужно. В основном перечислите все параметры с помощью n&-container с помощью n&TemplateOutlet и просто установите display : none для скрытого или display : block для выбранного элемента. Затем все отрисованные шаблоны будут кэшироваться, и они будут отображаться мгновенно при переключении вкладок без потери состояния.

 <n&-container *n&For="let sideBarOption of (sideBar.allItems | async)"&&t;
    <div [n&Style]="&etTemplateVisibility(tabSelected.value , sideBarOption)"&&t;
        <n&-container [n&TemplateOutlet]="&etTemplate(sideBarOption)"&&t;</n&-container&&t;
    </div&&t;
</n&-container&&t;

<n&-template name="dashboard"&&t;
    <dashboard&&t;</dashboard&&t;
</n&-template&&t;

<n&-template name="users"&&t;
    <users&&t;</users&&t;
</n&-template&&t;

<n&-template name="&roup-builder"&&t;
    <&roup-builder&&t;</&roup-builder&&t;
</n&-template&&t;
  

И в файле ts компонента

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