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

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

0 голосов
/ 20 ноября 2018

Я сталкиваюсь с некоторыми проблемами при проектировании контента 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

Ответы [ 3 ]

0 голосов
/ 20 ноября 2018

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

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

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

<ng-template #lol>
  <div>Hello</div>
  <ng-content select=".world"></ng-content> <--- World will be printed
</ng-template>
0 голосов
/ 20 ноября 2018

Проекция контента - это концепция проецирования контента из одного 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> - так что, похоже, не способисправить это

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

Надеюсь, это поможет - happy coding:)

0 голосов
/ 20 ноября 2018

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

. Затем его следует использовать следующим образом: 

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

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

...