专栏首页奔跑的蛙牛技术博客ElementRef & TemplateRef & ViewContainerRef

ElementRef & TemplateRef & ViewContainerRef

今天在做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 的主要作用是创建和管理内嵌视图或组件视图。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Java并发知识点(2)

    用new操作符创建一个新线程时如new Thread(r)  该线程还没有被运行,这意味着这个线程的状态是new。当一个线程处于新创建状态,程序还没有开始运行线...

    用户2436820
  • java并发知识点(3)-同步

    锁是可以重入的,线程可以重复获得已经持有的锁,一个被锁保护的代码可以调用另一个使用相同锁的方法

    用户2436820
  • Angular路由

    1. reload方法用于刷新当前文档,不从缓存中读取,走一遍服务器。使用reload页面内的表单可能会重新提交

    用户2436820
  • 那些让你傻傻分不清的插头

    电力系统在各个国家有不同的划分,有用110V 的有用240V的,有用50Hz的有用60Hz的,而在各自的国度里使用电器设备或者仪器等就要配不同的插头,就是你跨国...

    用户1605515
  • 如何根据v$parameter查询Oracle隐含参数

    Oracle的隐含参数在Oracle的官方文档中是不会出现的,这些参数主要是Oracle内部用于控制某些功能的开关,或者就像今天eygle讲的,Oracle牛逼...

    bisal
  • 使用sqlite3 模块操作sqlite3数据库

    Python内置了sqlite3模块,可以操作流行的嵌入式数据库sqlite3。如果看了我前面的使用 pymysql 操作MySQL数据库这篇文章就更简单了。因...

    乐百川
  • 怎么设置tomcat在get请求的中文也不乱码?两种情况下配置

    我们都知道,get请求和post请求的一个比较显著区别就是,在使用post请求的时候,中文不会乱码,但是在使用get请求的时候,如果url后面带有中文就会乱码了...

    凯哥Java
  • 我们必须知道,我们必将知道 ——区块链技术回顾与展望

    区块链大本营
  • 区块链发展历程

      1976年,Bailey W. Diffie、Martin E. Hellman两位密码学的大师发表了论文《密码学的新方向》,论文覆盖了未来几十年密码学所有...

    JouyPub
  • springmvc使用DELETE|PUT请求

    乐心湖

扫码关注云+社区

领取腾讯云代金券