Question

在Angular中尝试使用ElementRef，TemplateRef，ViewRef和ViewContainerRef。我创建了一个HTML模板，从那里我想创建一个View并将该视图传递给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执行相同的过程。 elementRef上显示的templateRef here只指向Angular为模板元素创建的DOM主机元素 - 它是注释节点。它不是你的想法，而不是模板的内容。要使用它：

this.myTemplateList.first.elementRef

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

在TemplateRef中未定义ElementRef

1 个答案: