#an&ular #typescript
#an&ular #typescript
Вопрос:
У меня есть элемент управления 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;
но вкладки здесь являются совершенно отдельным компонентом.
Ответ №1:
На самом деле это было действительно просто, если кому-то это нужно. В основном перечислите все параметры с помощью 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'
};
}