Transclusion - это концепция, которая позволяет вам создавать content-slot / ng-content внутри вашего компонента. Поэтому, если у вас есть дочерний компонент с слотом содержимого / ng-содержимым, родительский компонент, использующий дочерний компонент, может поместить все, что ему нужно, в слот содержимого дочернего компонента.
Представьте, что у вас есть два такие компоненты как:
дочерний компонент
<div>Child start</div>
<ng-content></ng-content>
<div>Child end</div>
родительский компонент
<div>Parent start</div>
<app-child>
<div>Parent middle</div>
</app-child>
<div>Parent end</div>
На экране будет отображаться что-то вроде этого:
Parent start
Child start
Parent middle
Child end
Parent end
Как видите, строка «Parent middle» отображается в середине дочернего элемента. Это может быть очень мощная концепция, позволяющая вам создавать дочерние элементы многократного использования, содержание которых может определяться их родителями.
Если вы когда-либо использовали компонент Angular Материальная карта, это является ярким примером этого. Компонент карты создает границы карты и устанавливает белый фон, но разработчик может из родительского компонента решить, что находится внутри карты.
Также стоит отметить, что у вас может быть несколько слотов содержимого / NG-контент в одном компоненте, и вы можете назначить им идентификатор. С помощью ссылки на идентификатор, который вы можете от родителя, решить, что и где находится внутри дочернего компонента.