问题
Already tried this and this solution but nothing worked.
I am using Angular 7 and trying to get a reference variable which I've placed inside the ng-template tag. But it always returns 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
}
I've tried printing it in all the life cycle hooks of angular but it always returns undefined. But when I try putting it in out side of ng-template it works perfectly.
Is there any way around?
回答1:
That is because, the content inside ng-template
is not yet rendered.
You should first activate it using ngTemplateOutlet
.
Add the following code in your html, it should work
<ng-template #abc>
<div #xyz>
</div>
</ng-template>
<ng-container *ngTemplateOutlet="abc"></ng-container>
DEMO
回答2:
The reason it's happening is because of the ng-template is never rendering on the HTML all by itself.
As per Angular docs:
The ng-template is an Angular element for rendering HTML. It is never displayed directly. In fact, before rendering the view, Angular replaces the and its contents with a comment.
It can be referred to using ngTemplateOutlet
or when with *ngIf else
or something like that. It doesn't exist on its own:
Update:
<div *ngIf="someConditionCheck;else abc">
content here ...
</div>
<ng-template #abc>
<div #xyz></div>
</ng-template>
You can find the demo code here.
来源:https://stackoverflow.com/questions/54783046/template-reference-variable-returns-undefined-inside-ng-template