ElementRef не определен в TemplateRef

Эксперименты с ElementRef, TemplateRef, ViewRef и ViewContainerRef в Angular. Я создал шаблон 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 не определен!- Я хочу печатать на консоли., все элементы внутри шаблона. но элементреф не определен!

2) я получаю ошибку, что createEmbeddedView не является функцией.

1 2

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 не определен!- Я хочу напечатать на консоли все элементы внутри шаблона . но элементреф не определен!

Вы не можете получить прямой доступ к элементам из templateRef. Вы должны следовать тому же процессу, используя @ViewChildren. elementRef, который доступен на templateRef, как показано здесь просто указывает на элемент DOM host, который Angular создал для элемента шаблона - это узел комментариев. Это не то, что вы думаете, не содержание шаблона. Чтобы получить его, просто используйте: 

this.myTemplateList.first.elementRef

Читать изучение методов угловой манипуляции DOM с использованием ViewContainerRef для получения более подробной информации.

1