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：

 1 <div class="content">
 2     <app-sub-dom #subdom></app-sub-dom>
 3     <div #myDom>
 4         <p>dom-operation works!</p>
 5 
 6 
 7         <div id="div1">测试获取里面内容byid 111</div>
 8 
 9         <br>
10 
11         <div id="div2" *ngIf="flag">测试获取里面内容byid 222</div>
12 
13         <br>
14         <button (click)="GetSubMethod()">获取子组件的方法</button>
15         {{msg}}
16         <br>
17 
18         <button (click)="setAsid()">操作侧边栏</button>
19     </div>
20 
21 </div>
22 <div id="aside">
23     我是侧边栏
24 </div>

View Code

dom-operation.component.ts：

 1 //父子组件通过viewchild调用子组件里面的方法
 2 //1：在模板中给当前dom起一个名字 比如#myDom
 3 //2:使用viewchild装饰器来操作dom,放弃原生的JavaScript方式的操作
 4 
 5 import { Component, OnInit, ViewChild } from '@angular/core';
 6 
 7 @Component({
 8   selector: 'app-dom-operation',
 9   templateUrl: './dom-operation.component.html',
10   styleUrls: ['./dom-operation.component.css']
11 })
12 export class DomOperationComponent implements OnInit {
13 
14   @ViewChild('myDom', { static: true }) myDom: any;
15 
16   @ViewChild('subdom', { static: true }) subDom: any;
17 
18   constructor() { }
19 
20   public flag: boolean = true;
21   public msg: string = "";
22   ngOnInit() {
23     //正确：没有任何angular指令在html中
24     // let div1Obj: any = document.getElementById("div1")
25     // console.log(div1Obj.innerHTML);
26 
27     //报错： Cannot read property 'innerHTML' of null
28     //原因：一旦静态html被添加值类，会导致原先的html发生变化，无法通过原生JavaScript 操作dom
29     // let div2Obj:any = document.getElementById("div2")
30     // console.log(div2Obj.innerHTML);
31   }
32 
33   //生命周期中：界面渲染后：正确获取
34   ngAfterViewInit() {
35     this.myDom.nativeElement.style.width = "100px";
36     this.myDom.nativeElement.style.background = "red";
37     console.log(this.myDom.nativeElement.innerHTML);
38     console.log(this.myDom);
39 
40     //正确但不推荐：
41     // let div2Obj: any = document.getElementById("div2")
42     // console.log("ngAfterViewInit:" + div2Obj.innerHTML);
43   }
44 
45   GetSubMethod() {
46     this.msg = this.subDom.getData();
47   }
48 
49   setAsid() {
50 
51     let siade: any = document.getElementById("aside");
52     console.log(siade.style.transform);
53     if (siade.style.transform == "translate(100%, 0px)") {
54       siade.style.transform = "translate(0,0)";
55     } else {
56       siade.style.transform = "translate(100%,0)";
57     }
58 
59   }
60 
61 }

View Code

sub-dom.component.ts

 1 import { Component, OnInit } from '@angular/core';
 2 
 3 @Component({
 4   selector: 'app-sub-dom',
 5   templateUrl: './sub-dom.component.html',
 6   styleUrls: ['./sub-dom.component.css']
 7 })
 8 export class SubDomComponent implements OnInit {
 9 
10   constructor() { }
11 
12   ngOnInit() {
13   }
14 
15 
16   getData(){
17     return 'this is a sub dom method';
18   }
19 }