Угловой шаблон и включение: содержание вышло из строя

Question

Я сталкиваюсь с некоторыми проблемами при проектировании контента Angular. У меня есть шаблон, который имеет некоторый общий HTML для каждого экземпляра, который будет использоваться, и другую часть, которая будет изменяться от случая к случаю через включение (ng-content). Проблема в том, что независимо от того, какой порядок я использую в DOM-элементах моего шаблона, выходные данные всегда одинаковы. Вот код:

<ng-template #lol>
  <ng-content select=".world"></ng-content>
  <div>Hello</div>
</ng-template>

<ng-container [ngTemplateOutlet]="lol">
  <div class="world">World</div>
</ng-container>

Я ожидаю, что полученный результат будет:

World
Hello

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

Hello
World

И я не могу понять почему. Может кто-нибудь подсказать, почему это происходит, и что я могу сделать, чтобы получить желаемый результат? Спасибо.

ПРИМЕЧАНИЕ. Вот StackBlitz с полным примером: https://stackblitz.com/edit/angular-vfecbs?file=src%2Fapp%2Fapp.component.html

Answer 1

ng-content иметь особую силу, где вы размещаете его, там он заменит выбранный контент.

<ng-template #lol>
  <ng-content select=".world"></ng-content> <--- World will be printed here
  <div>Hello</div>
</ng-template>

Убедитесь, что там, где вы добавляете ng-контент, будет заменен выбранный контент. Если вам нужен Hello in up, просто переместите элемент первым

<ng-template #lol>
  <div>Hello</div>
  <ng-content select=".world"></ng-content> <--- World will be printed
</ng-template>

Answer 2

Контент-проекция - это концепция проецирования контента из одного component другому - если вы передаете какую-то ценность для вас child компонент из parent компонент и значение изменяется динамически, то вы можете перейти к проекции контента

В вашем случае весь <ng-template> передается вашему <ng-container> таким образом, это читается как Hello, World - ничего не происходит с <ng-content> удалите его, вы можете найти тот же результат

<ng-container [ngTemplateOutlet]="lol">
  <div>Hello</div>
  <div class="world">World</div>
</ng-container>

Ваш вывод будет таким, когда вы проверяете свой код - таким образом, только <div>Hello</div> встраивается в ваш контейнер - он не передает контент из <ng-template> - так что, кажется, не способ исправить это

Попробуйте, передавая контент от одного компонента другому проверить эту ссылку

Надеюсь, это поможет - счастливое кодирование:)

Answer 3

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

Затем его следует использовать так:

<app-hello>
  <p class="world">Some projected Content</p>
</app-hello>

Вот образец StackBlitz для вашей ссылки.