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 }

View Code

效果圖：

總結

以上是生活随笔為你收集整理的Angular学习系列五：装饰器ViewChild的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。