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:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
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>
dom-operation.component.ts:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
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 }
sub-dom.component.ts
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
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 }
效果图: