Angular学习系列五：装饰器ViewChild

1：在新项目中，新增 dom-operaiton 和 sub-dom 两个组件，并且 sub-dom放入 dom-operation中

     ng g component components/dom-operaiton

     ng g component components/sub-dom

     在 dom-operation中引入sub-dom标签：

     <app-sub-dom #subdom></app-sub-dom>

     <div #myDom></div>

 

2：引入ViewChild

     在dom-operaiton.component.ts中，引入：

     import { Component, OnInit, ViewChild } from '@angular/core';

     并使用：

     @ViewChild('myDom', { static: true }) myDom: any;

     @ViewChild('subdom', { static: true }) subDom: any;

 

3：学习目标：使用ViewChild装饰器，调用子组件方法，操作dom

   （以下省略了样式等）

 

dom-operation.component.html：

<div class="content">
    <app-sub-dom #subdom></app-sub-dom>
    <div #myDom>
        <p>dom-operation works!</p>


        <div id="div1">测试获取里面内容byid 111</div>

        <br>

        <div id="div2" *ngIf="flag">测试获取里面内容byid 222</div>

        <br>
        <button (click)="GetSubMethod()">获取子组件的方法</button>
        {{msg}}
        <br>

        <button (click)="setAsid()">操作侧边栏</button>
    </div>

</div>
<div id="aside">
    我是侧边栏
</div>

 

dom-operation.component.ts：

//父子组件通过viewchild调用子组件里面的方法
//1：在模板中给当前dom起一个名字 比如#myDom
//2:使用viewchild装饰器来操作dom,放弃原生的JavaScript方式的操作

import { Component, OnInit, ViewChild } from '@angular/core';

@Component({
  selector: 'app-dom-operation',
  templateUrl: './dom-operation.component.html',
  styleUrls: ['./dom-operation.component.css']
})
export class DomOperationComponent implements OnInit {

  @ViewChild('myDom', { static: true }) myDom: any;

  @ViewChild('subdom', { static: true }) subDom: any;

  constructor() { }

  public flag: boolean = true;
  public msg: string = "";
  ngOnInit() {
    //正确：没有任何angular指令在html中
    // let div1Obj: any = document.getElementById("div1")
    // console.log(div1Obj.innerHTML);

    //报错： Cannot read property 'innerHTML' of null
    //原因：一旦静态html被添加值类，会导致原先的html发生变化，无法通过原生JavaScript 操作dom
    // let div2Obj:any = document.getElementById("div2")
    // console.log(div2Obj.innerHTML);
  }

  //生命周期中：界面渲染后：正确获取
  ngAfterViewInit() {
    this.myDom.nativeElement.style.width = "100px";
    this.myDom.nativeElement.style.background = "red";
    console.log(this.myDom.nativeElement.innerHTML);
    console.log(this.myDom);

    //正确但不推荐：
    // let div2Obj: any = document.getElementById("div2")
    // console.log("ngAfterViewInit:" + div2Obj.innerHTML);
  }

  GetSubMethod() {
    this.msg = this.subDom.getData();
  }

  setAsid() {

    let siade: any = document.getElementById("aside");
    console.log(siade.style.transform);
    if (siade.style.transform == "translate(100%, 0px)") {
      siade.style.transform = "translate(0,0)";
    } else {
      siade.style.transform = "translate(100%,0)";
    }

  }

}

 

sub-dom.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-sub-dom',
  templateUrl: './sub-dom.component.html',
  styleUrls: ['./sub-dom.component.css']
})
export class SubDomComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }


  getData(){
    return 'this is a sub dom method';
  }
}

 

效果图：