Проекция контента, что это такое?

Проекция содержимого (также известная как включение) - это способ импорта содержимого HTML извне компонента и вставки этого содержимого в шаблон компонента в указанном месте.

Таким образом, используя проекцию контента, вы можете получить результат, показанный на следующем изображении.

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

Что такое нг-контейнер?

Angular ng-container - это группирующий элемент (элемент синтаксиса), который не мешает стилям или макету, потому что Angular не помещает его в DOM.

И мы можем использовать с ним структурные директивы.

Структурная директива изменяет макет DOM, добавляя, удаляя или манипулируя элементами DOM.

am-icon - это следующий компонент:

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

Как работает ng-content?

  • ng-content не создает контент. Он просто проецирует существующий контент
  • Постоянство ожиданий
  • Представление
  • Следуя предыдущему правилу, он не может ни создавать, ни уничтожать спроектированные компоненты (жизненный цикл).
  • Только последний ng-content проецирует контент.

И… что мне делать? Здесь на помощь приходит ng-template…

Что такое ng-template?

Как следует из названия, это элемент шаблона: модель, которую вы можете создать. Следовательно, вы можете установить шаблон в качестве входных данных для компонента, что очень полезно.

Синтаксис звездочки (*)

Звездочка - это синтаксический сахар для чего-то более сложного.

Обычно вы видите это с: *ngIf, *ngFor, *anyDirective,…

Тогда наш повторяющийся компонент?

Что это за ngTemplateOutlet?

Директива ngTemplateOutlet получает шаблон ng. Он отвечает за создание экземпляра и его вставку в DOM.

Да, Контекст как в JS!

Мы можем передать объект экземпляру, который создается ngTemplateOutlet вашего ng-шаблона. Этот объект может содержать все, что вы хотите передать в свой шаблон. Здесь мы раскрываем магию множества компонентов библиотеки (datatables, angular-material, ng-bootstrap и т. Д.).

Мы можем делать потрясающие вещи!

Больше больше больше…