Блог

Главная - Вопросы по программированию - как ссылаться на ng-шаблон из ng-контейнера с помощью выражения if

как ссылаться на ng-шаблон из ng-контейнера с помощью выражения if

#angular

#angular

Вопрос:

У меня есть этот шаблон, на который я хочу ссылаться в 2 разных ng-template разделах:

 <ng-template #expandedRow>
  <tr>
    <td>Some content</td>
  </tr>
</ng-template>

Я ссылаюсь на это следующим образом:

 <ng-template #folderContent>
  <ng-container *ngIf="expanded; then expandedRow else undefined"></ng-container>
</ng-template>

Есть ли лучший способ сделать это с помощью if then .

Есть ли способ использовать [hidden] подобное, поскольку он не поддерживается на ng-container .

Комментарии:

1. Как насчет обработки того, должен ли ng-template быть видимым внутри самого шаблона вместо этого? Было бы это осуществимо? Что-то вроде этого: stackblitz.com/edit/angular-empty-project-xs4oge?file=app / … (вместо этого используя ngTemplateOutlet )

2. очень хотелось бы узнать, почему это было отклонено

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

Ответ №1:

Не уверен, возможно ли это в вашем случае, но вы можете определить, виден ли шаблон в самом шаблоне, используя ngTemplateOutlet :

Я бы подошел к этому таким образом:

 <ng-template #folderContent>
  <ng-container *ngTemplateOutlet="expandedRow; context: { visible: expanded }"></ng-container>
</ng-template>

И в шаблоне expandedRow:

 <ng-template #expandedRow let-contentVisible="visible">
  <tr *ngIf="contentVisible">
    <td>Some content</td>
  </tr>
</ng-template>

Это позволяет передавать дополнительные контекстные параметры самому шаблону, позволяя определить, виден ли шаблон непосредственно внутри самого шаблона.

Рабочий пример stackblitz, позволяющий поиграть с ним, можно найти здесь.

Ответ №2:

Вы можете попробовать в обратном порядке, как показано ниже.

 <ng-contaniner *ngIf="true else newone">
<div> true works</div> 
</ng-container>
    <ng-template #newone>
    false works</ng-template>