ElementRef & TemplateRef & ViewContainerRef

用户2436820

发布于 2018-09-05 10:23:45

1.1K0

发布于 2018-09-05 10:23:45

文章被收录于专栏：奔跑的蛙牛技术博客奔跑的蛙牛技术博客

今天在做ng项目，看着前人的代码有 viewChild() 等关键字。新手有点疑惑，索性查查资料总结一下和ng相关的几个和DOM相关的几个概念

ElementRef

由于ng是跨平台的为了减少视图层和渲染层的耦合也为了让ng更适应多平台，ng帮我们封装了ElementRef，我们可以通过ElementRef拿到native元素(在浏览器中也就是我们常说的DOM元素)

下面我们看一段代码

    import { Component, ElementRef, AfterViewInit }  from '@angular/core';
    @Component ({
          selector:'my-app',
          template:`
              <div #greet>Hello  哇牛！</div>
          `
    })
    export class AppComponent(){
          @ViewChild('greet')  greetDiv: ElementRef

          construcor(private elementRef: ElementRef, private renderer: Renderer)  {
    
          }
          ngAfterViewInit() {
              // 1: 这一种可以减少耦合，并且做到跨平台
              this.renderer.setElementStyle(this.greetDiv.nativeElement, 'backgroundColor',red)
            //   2: 这一种写法不提倡
            this.greetDiv.nativeElement.backgroundColor='red'
          }
    }

TemplateRef && ViewContainerRef

template本身是HTML的标签，用于保存客户端的内容机制，该内容在页面渲染时不被加载，但是可以在运行时被javascript解析,详情可以看 Template HTML TemplateRef

    // @angular/core/src/linker/template_ref.d.ts
    // 用于表示内嵌的template模板，能够用于创建内嵌视(EmbeddedViews)
    export declare abstract class TemplateRef<C> {
        elementRef: ElementRef;
        abstract createEmbeddedView(context: C): EmbeddedViewRef<C>;
    }

templateRef 下面有个抽象方法，不能直接实例化抽象类应该实例抽象化类的子类，每个实例都具有createEmbeddedView方法

ViewContainerRef

import { Component, TemplateRef, ViewChild, ViewContainerRef, AfterViewInit } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
    <h1>Welcome to Angular World</h1>
    <template #tpl>
      <span>I am span in template</span>
    </template>
  `,
})
export class AppComponent {
  name: string = 'Semlinker';

  @ViewChild('tpl')
  tplRef: TemplateRef<any>;

  @ViewChild('tpl', { read: ViewContainerRef })
  tplVcRef: ViewContainerRef;

  ngAfterViewInit() {
    // console.dir(this.tplVcRef); (1)
    this.tplVcRef.createEmbeddedView(this.tplRef);
  }
}

TemplateRef：用于表示内嵌的 template 模板元素，通过 TemplateRef 实例，我们可以方便创建内嵌视图(Embedded Views)，且可以轻松地访问到通过 ElementRef 封装后的 nativeElement。需要注意的是组件视图中的 template 模板元素，经过渲染后会被替换成 comment 元素。

ViewContainerRef：用于表示一个视图容器，可添加一个或多个视图。通过 ViewContainer Ref 实例，我们可以基于 TemplateRef 实例创建内嵌视图，并能指定内嵌视图的插入位置，也可以方便对视图容器中已有的视图进行管理。简而言之，ViewContainerRef 的主要作用是创建和管理内嵌视图或组件视图。

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2017.11.09 ，如有侵权请联系 cloudcommunity@tencent.com 删除

html

容器

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体分享计划，欢迎热爱写作的你一起参与！

html

容器

登录后参与评论

0 条评论

热度