Это продолжение статьи « Angular: почему вам следует подумать об использовании вывода шаблона вместо проекции контента », где показано, как реализовать вкладки в Angular, используя NgTemplateOutlet
для избегайте потенциальных проблем с производительностью при использовании ng-content
, описанных в вышеупомянутом тексте.
Эта статья написана для Angular 2.x
Обновление: Angular 4 не поддерживает
<template>
в пользу<ng-template>
и представляет новый набор функций, которые могут превосходить метод, представленный в этой статье. .
Основной компонент приложения
Мы начнем с основного компонента приложения, чтобы проиллюстрировать API вкладок.
Функция вкладок будет состоять из двух компонентов:
app-tabs
, который отображает вкладки в соответствии с информацией, предоставленной его дочерними элементами.app-tab
содержит информацию о вкладке - имя и ссылку на конкретный шаблон.
Использование двух компонентов сделает код более удобным в сопровождении, а шаблон будет выглядеть чистым.
Элементы <template>
служат для удержания содержимого для отображения, когда конкретная вкладка активна, с помощью ее TemplateRef
.
Компонент вкладки
TabComponent
содержит связанную информацию, которая читается TabsComponent
.
Input
декоратор позволяет связывать значения. В данном случае: name
строка и templateRef
.
Компонент вкладок
Во-первых, мы хотим получить доступ к его дочерним элементам (вне шаблона) с помощью ContentChildren
декоратора, который возвращает QueryList
объект, содержащий то, что мы хотим.
Потомки доступны, когда выполняется ngAfterContentInit
hook. currentTab
будет содержать ссылку на текущую вкладку. По умолчанию будет указана первая вкладка.
Затем мы хотим, чтобы компонент отображал вкладки и контент с примером стиля.
Мы отображаем span
элемент для каждой вкладки, а директива ngTemplateOutlet
принимает TemplateRef
текущую вкладку, поэтому будет отображаться соответствующий контент.
Теперь нам нужно добавить интерактивности, чтобы вкладки стали полезными.
TabsComponent
имеет два новых метода, используемых шаблоном:
isSelected
, который покажет, выбрана ли указанная вкладка. Используется с директивойngClass
для добавления классаselected
на соответствующую вкладку.onTabClick
, который привязан к событию щелчка, принимает ссылку на выбранную вкладку и устанавливает ее как текущую.
Вот и все!
Вы можете увидеть окончательный результат, проверив этот плункер здесь.
Щелкните или коснитесь ❤, если вы нашли эту статью полезной. Вы сделаете это видимым для более широкой аудитории. Спасибо!