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

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

Я использую 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  
}

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

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


angular ng-bootstrap ng-template
person Adnan Sheikh    schedule 20.02.2019    source источник

Ответы (2)


arrow_upward
6
arrow_downward

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

Вы должны сначала активировать его с помощью ngTemplateOutlet.

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

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

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

ДЕМО

person Amit Chigadani    schedule 20.02.2019
comment
Спасибо @Amit, работает. Но я использую [NgbPopOver] (ng-bootstrap.github.io/ # / components / popover / examples # tplcontent) для модуля чата. Когда я помещаю ng-container в конец, это портит дизайн. Любая идея? - person Adnan Sheikh; 20.02.2019
comment
Кажется, он ведет себя как простой div, когда мы помещаем ng-container под ng-template. Я прав? - person Adnan Sheikh; 20.02.2019
comment
blog.angular-university.io/ - person Amit Chigadani; 20.02.2019

arrow_upward
3
arrow_downward

Причина в том, что ng-template никогда не отображает в HTML.

Согласно документации Angular:

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

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

Обновление:

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

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

Вы можете найти демонстрационный код здесь.

person Shashank Vivek    schedule 20.02.2019
comment
Спасибо @Shashank, Подскажите, пожалуйста, подробнее, как использовать * ngIf else специально для этого решения? - person Adnan Sheikh; 20.02.2019
comment
@AdnanSheikh Это сработает, если вы приведете в надлежащее состояние. Проверить демонстрационный код - person Shashank Vivek; 21.02.2019