zoukankan      html  css  js  c++  java
  • angular5 @viewChild @ContentChild ElementRef renderer2

    @viewChild

    作用一:选择组件内节点

    <!--视图  -->
    <div #mydiv><input></div>
    // 选择
    @ViewChild('mydiv') mydiv: ElementRef
    
    // 返回原生节点
    let el = this.mydiv.nativeElement // 
    
    // 使用原生方法
    let ipt = el.querySelector('input')


    作用二:选择子组件可调用自组件内的函数

    子组件:
    @Component({ selector: 'user-profile' })

    export class UserProfile {
      constructor() {}
      sendData() { //send data }
    }




    当前组件
    import { Component, ViewChild } from '@angular/core';
    import { UserProfile } from '../user-profile';
    @Component({ template: '<user-profile (click)="update()"></user-profile>', })

    export class MasterPage {
      // ViewChild takes a class type or a reference name string.
      // Here we are using the type

      @ViewChild(UserProfile) userProfile: UserProfile
      constructor() { } ngAfterViewInit() {

      // After the view is initialized,
      this.userProfile will be available this.update();
      }
      update() {
        this.userProfile.sendData();
      }
    }


    @ViewChild @ContentChild @ViewChildren @ContentChildren 又是什么

    @ViewChild 选择组件模板内的节点

    @ContentChild 选择当前组件引用的子组件 @ContentChild(组件名)

    @ViewChildren 和 @ContentChildren 则为对应的复数

    import { Component, ContentChild, AfterContentInit } from '@angular/core';
    import { ChildComponent } from './child.component';
    
    @Component({
        selector: 'exe-parent',
        template: `
          <p>Parent Component</p>  
          <ng-content></ng-content>
        `
    })
    export class ParentComponent implements AfterContentInit {
        @ContentChild(ChildComponent)
        childCmp: ChildComponent;
    
        ngAfterContentInit() {
            console.dir(this.childCmp);
        }
    }



    import { Component } from '@angular/core';
    
    @Component({
        selector: 'exe-child',
        template: `
          <p>Child Component</p>  
        `
    })
    export class ChildComponent {
        name: string = 'child-component';
    }



    import { Component } from '@angular/core';
    
    @Component({
      selector: 'my-app',
      template: `
        <h4>Welcome to Angular World</h4>
        <exe-parent>
          <exe-child></exe-child>
        </exe-parent>
      `,
    })
    export class AppComponent { }


    ContentChild 与 ViewChild 的异同点

    相同点

    • 都是属性装饰器

    • 都有对应的复数形式装饰器:ContentChildren、ViewChildren

    • 都支持 Type<any>|Function|string 类型的选择器

    不同点

    • ContentChild 用来从通过 Content Projection 方式 (ng-content) 设置的视图中获取匹配的元素

    • ViewChild 用来从模板视图中获取匹配的元素

    • 在父组件的 ngAfterContentInit 生命周期钩子中才能成功获取通过 ContentChild 查询的元素

    • 在父组件的 ngAfterViewInit 生命周期钩子中才能成功获取通过 ViewChild 查询的元素

     

    renderer2

    // 添加类
    this.renderer2.addClass(el, 'active')
    // 移除了类
    this.renderer2.removeClass(el, 'active')
    // 设置样式
    this.renderer2.setStyle(el, 'height', '10px')
    // 移除样式
    this.renderer2.removeStyle(el, 'height')
    // 设置属性
    this.renderer2.setAttribute(el, 'data-id', 'id')
    // 移除属性
    this.renderer2.removeAttribute(el, 'data-id')
    // 设置值
    this.renderer2.setValue(ipt, 'some str')
    // 监听事件
    this.renderer2.listen(el, 'click', (e)=>{console.log(e)}) //el|'window'|'document'|'body'
    
    // 其他类似
    createElement 创建元素
    createComment 动态创建组件
    createText 创建文本节点
    destroyNode 销毁节点
    appendChild 插入子节点
    insertBefore (parent: any, newChild: any, refChild: any): void
    removeChild(parent: any, oldChild: any): void 移除子元素
    selectRootElement(selectorOrNode: string|any): any
    parentNode(node: any): any
    nextSibling(node: any): any
     
  • 相关阅读:
    spark 查看 job history 日志
    Kafka集群安装
    spark总体概况
    hadoop distcp使用
    基于spark1.3.1的spark-sql实战-02
    HiveServer2 入门使用
    基于spark1.3.1的spark-sql实战-01
    Hive基础学习文档和入门教程
    HDFS HA与QJM(Quorum Journal Manager)介绍及官网内容整理
    Akka DEMO
  • 原文地址:https://www.cnblogs.com/mttcug/p/8004359.html
Copyright © 2011-2022 走看看