ElementRef在TemplateRef中未定义 [英] ElementRef is undefined in TemplateRef

问题描述

使用Angular中的ElementRef，TemplateRef，ViewRef和ViewContainerRef进行实验.我已经创建了一个HTML模板，从那里我想创建一个View并将该视图传递给ViewContainerRef，但是它不起作用

Experimenting with ElementRef, TemplateRef, ViewRef and ViewContainerRef in Angular. I have created an HTML template, from there I want to create a View and pass that view to ViewContainerRef but it isn't working

模板代码

template: `
  <ng-container #vc></ng-container>
  <ng-template #mytmpl>
    <div>Name: <input type="text" name="name" /> </div>
    <div>Gender: 
      <select  name="gender" >
        <option>Male(1)</option>
        <option>Female(2)</option>
      </select>
    </div>
    <div>About you: <textarea ></textarea></div>
    <div>Married: <input type="checkbox" /></div>      
    <div>Children:     
      <ng-container *ngFor = "let option of this.selectOptions">
        <input  type="radio" [id]="option" name="children" [value]=option [(ngModel)]="this.children"/> {{option}}
      </ng-container>
   </div>
   <p>Some para</p>
   <p>Para with span <span>Inside span</span></p>
  </ng-template>
`

在课堂上，我访问模板并查看容器

In the class, I access the template and view container

@ViewChild('vc',{read:ViewContainerRef}) v:ViewContainerRef;
@ViewChildren("mytmpl") myTemplateList:TemplateRef<any>;

我使用以下代码创建视图

I use the following code to create the view

ngAfterViewInit(){
  let elementRef = this.myTemplateList.elementRef
  let view = this.myTemplateList.createEmbeddedView(null)
  this.v.insert(view)
  console.log(elementRef);
}

问题

1)elementRef未定义！-我想在控制台上打印模板中的所有元素.但是elementRef是未定义的！

1) elementRef is undefined!- I want to print on the console, all the elements inside the template. but elementRef is undefined!

2)我收到错误消息createEmbeddedView不是一个函数.

2) I get the error that createEmbeddedView is not a function.

推荐答案

我收到了createEmbeddedView不是函数的错误.

I get the error that createEmbeddedView is not a function.

有几个问题:

1)在此处使用{read: TemplateRef}

@ViewChildren("mytmpl", {read: TemplateRef}) myTemplateList:TemplateRef<any>;

2)如果使用ViewChildren而不是ViewChild，它将返回一个集合，因此您需要通过索引访问该成员:

2) If you use ViewChildren, not ViewChild, it returns a collection so you need to access the member by the index:

myTemplateList.first

它变成:

@ViewChildren("mytmpl", {read: TemplateRef}) myTemplateList:TemplateRef<any>;
...
let view = this.myTemplateList.first.createEmbeddedView(null)

或者直接使用ViewChild:

@ViewChild("mytmpl", {read: TemplateRef}) myTemplateList:TemplateRef<any>;
...
let view = this.myTemplateList.createEmbeddedView(null)

1)未定义elementRef！-我要在控制台上打印所有 模板中的元素.但是elementRef是未定义的！

1) elementRef is undefined!- I want to print on the console, all the elements inside the template. but elementRef is undefined!

您不能直接从templateRef访问元素.您需要使用@ViewChildren遵循相同的过程. templateRef上可用的elementRef，如

You can't directly access the elements from the templateRef. You need to follow the same process using @ViewChildren. The elementRef that is available on the templateRef as shown here just points to the DOM host element that Angular created for the template element - it's a comment node. It's not what you think it is, not the contents of the template. To get it just use:

this.myTemplateList.first.elementRef

有关更多详细信息，请阅读使用ViewContainerRef 探索Angular DOM操作技术.

Read Exploring Angular DOM manipulation techniques using ViewContainerRef for more details.

这篇关于ElementRef在TemplateRef中未定义的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！