Это продолжение статьи « 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, который привязан к событию щелчка, принимает ссылку на выбранную вкладку и устанавливает ее как текущую.

Вот и все!

Вы можете увидеть окончательный результат, проверив этот плункер здесь.

Щелкните или коснитесь ❤, если вы нашли эту статью полезной. Вы сделаете это видимым для более широкой аудитории. Спасибо!