Ссылочная переменная шаблона возвращает неопределенное значение внутри ng-шаблона

Question

Уже пробовал это и это решение, но ничего не помогло.

Я использую Angular 7 и пытаюсь получить справочную переменную, которую я поместил внутриТег ng-template .Но он всегда возвращает undefined

test-component.html

<ng-template #abc>
  <div #xyz>    
  </div>
</ng-template>

test-component.ts

@ViewChild('abc') abc: ElementRef; //---> works fine
@ViewChild('xyz') xyz: ElementRef; //---> undefined

test-component.ts

ngAfterViewInit(){
  console.log(this.xyz); //---> undefined  
}

Я пробовал печатать его во всех хуках угловых жизненного цикла, но он всегда возвращает неопределенное значение.Но когда я пытаюсь положить его за пределы ng-template , он отлично работает.

Есть ли способ обойти?

Answer 1

Причина, по которой это происходит, потому что ng-template никогда не отображается в html сам по себе.

Согласно Angular Docs

Это Angularэлемент для рендеринга HTML.Он никогда не отображается напрямую.Фактически, перед рендерингом представления Angular заменяет и его содержимое комментарием.

На него можно ссылаться с помощью ngTemplateOutlet или с *ngIf else или чем-то в этом роде.Сам по себе он не существует

Обновление:

<div *ngIf="someConditionCheck;else abc">
    content here ...
</div>

<ng-template #abc>
   <div #xyz>    
   </div>
</ng-template>

Демонстрационный код

Answer 2

Это потому, что содержимое внутри ng-template еще не визуализировано.

Сначала вы должны активировать его, используя ngTemplateOutlet.

Добавьте следующий код в ваш HTML, он должен работать

<ng-template #abc>
  <div #xyz>    
  </div>
</ng-template>

<ng-container *ngTemplateOutlet="abc"></ng-container>

DEMO