ElementRef 在 TemplateRef 中未定义

Question

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

模板代码

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>
`

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

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

我使用下面的代码来创建视图

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

问题

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

2) 我收到 createEmbeddedView 不是函数的错误。

Answer 1

我收到 createEmbeddedView 不是函数的错误。

有几个问题：

1) 在这里使用{read: TemplateRef}：

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

2) 如果你使用ViewChildren，而不是ViewChild，它会返回一个集合，所以你需要通过索引来访问成员：

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 是未定义的！

您不能直接访问来自templateRef 的元素。您需要使用@ViewChildren 遵循相同的过程。在templateRef 上可用的elementRef 如here 所示只是指向Angular 为模板元素创建的DOM 宿主元素——它是一个注释节点。这不是你想的那样，不是模板的内容。要获得它，只需使用：

this.myTemplateList.first.elementRef

阅读Exploring Angular DOM manipulation techniques using ViewContainerRef了解更多详情。