Разница между ElemenetRef и TemplateRef в angular4 - PullRequest
Новая
       22

Разница между ElemenetRef и TemplateRef в angular4

0 голосов
/ 19 ноября 2018

Я видел много примеров ElemenetRef и TemplateRef, которые запутали меня.

  1. В чем разница между ElementRef и TemplateRef, почему мы должны использовать один над другим

HTML 

<ng-template #element>
  <div style="border:solid 3px yellow;width:250px;
height:250px;position:relative;top:0px;">
    this is my element
  </div>

</ng-template>
<ng-container #template>

</ng-container>

.ts file 

@ViewChild('element', { read: TemplateRef }) element: TemplateRef<any>;
  @ViewChild('template', { read: ViewContainerRef }) template: ViewContainerRef;

 ngAfterViewInit() {
    this.template.createEmbeddedView(this.element);
  }

Теперь, если я изменю приведенный выше код, чтобы использовать ElementRef, то он также работает нормально 

@ViewChild('element', { read: ElementRef }) element: ElementRef;

поэтому мой вопрос: зачем мне использовать TemplateRef, если я могу добиться того же с использованием ElementRef

1 Ответ

0 голосов
/ 19 ноября 2018

ElementRef это просто как document.getElementById('myId');

на ElementRef, вы можете сделать только некоторые украшения

TemplateRef - это встроенный шаблон, в котором вы можете дать егов угловую, чтобы создать Embedded View.

*ngFor, делая то же самое, он читает элемент как TemplateRef и вводит несколько раз, чтобы создать представление с данными

TemplateRef не может использоваться какэлемент для css украшений в .ts

...