Почему, когда и как использовать этот синтаксис в Angular?

Я искал информацию о внедрении зависимостей, а затем я нашел эту статью:

https://medium.com/angular-chile/inyecci%C3%B3n-de-componentes-y-directivas-en-angular-6ae75f64be66

Там я видел этот синтаксис

   <ui-card>
  <h1>Your daily @agadmator quote</h1>
  <p>Congratulations! You are an excellent analyzer of hypothetical end game positions and that never actually happened.</p>
</ui-card>

и это привлекло мое внимание.

Я полагал, что ничто не может пойти между пользовательским угловым тегом (выборочный тег пользователя).

Я хотел бы узнать больше информации об этом, но я не знаю, какие поисковые термины использовать и как работает этот синтаксис.

Не могли бы вы помочь мне объяснить или поделиться информацией об этом, пожалуйста?

Всего 1 ответ


Это называется «проекция контента» (ранее называлось «включение»).

Ознакомьтесь с руководством по его использованию здесь: https://scotch.io/tutorials/angular-2-transclusion-using-ng-content

Вкратце, для передачи данных вашим компонентам вы обычно делаете это:

<my-card [content]="myVar"></my-card>

Но когда вам нужно передать другие элементы HTML, вы можете использовать проекцию контента:

<my-card>
    <h1>Hello world</h1>
</my-card>

Внутри MyCardComponent вы можете получить доступ к этому контенту с помощью специального тега <ng-content> .


Есть идеи?

10000