ElemenetRef和TemplateRef在angular4中的区别

Question

我看到了许多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文件

@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;

所以我的问题是，如果我可以通过使用ElementRef达到相同的效果，为什么我应该使用TemplateRef

Answer 1

ElementRef就像document.getElementById('myId')一样；

通过ElementRef，您只能做一些装饰

TemplateRef是一个嵌入式模板，您可以将其赋予角度以创建嵌入式视图。

*ngFor相同，它将元素读取为TemplateRef并多次注入以创建具有数据的视图

TemplateRef不能用作.ts中CSS装饰的元素

Answer 2

ElementRef

1. 用于基本的DOM抽象。

2. 我们可以访问DOM中存在的基本本机元素。

TemplateRef

1. 用于访问模板中的DOM元素。

2. 结构指令使用此TemplateRef。