angular ViewChild操作DOM和父子组件通讯

一：ViewChild操作DOM

1. 绑定元素

使用  #别名 和要操作的元素进行绑定

 <div #div0>
   使用ViewChild获取DOM操作
 </div>

 

2. 在对应的.ts文件引入ViewChild；

　　在export中声明变量接收绑定元素;

　　在ngAfterViewInit(){}中this调用；

     设置static: true将不允许您从动态模板分辨率（例如*ngIf）获得结果。

 

 

 

 

 

二：子组件向父组件传递信息

（通过ViewChild绑定子组件，在父组件中以操作DOM的形势操作子组件）

1️⃣使用  #别名 和要操作的元素进行绑定 

// 在父组件的.html文件中添加子组件，定义 #变量
<app-header #header></app-header>

 

2️⃣在对应的.ts文件引入ViewChild；

　　在export中声明变量接收绑定元素;

　　在ngAfterViewInit(){}中this调用；

     设置static: true将不允许您从动态模板分辨率（例如*ngIf）获得结果。

 

 

 

 

 

 

 

三：父组件向子组件传递信息

1.父组件向子组件传递参数 

1️⃣ 在父组件的.html文件里面的子组件标签绑定参数变量；

/*
header是home的子组件
*/
<app-header [title]="title"></app-header>

 

2️⃣ 在父组件的.ts文件里面的子组件标签绑定参数变量；

export class HomeComponent implements OnInit {
    
// 要传入子组件header的数据
  public title:string = '我是首页组件传入子组件header的标题'

  constructor() { }
  ngOnInit() {
  }
}

 

3️⃣在子组件的.ts文件引入Input组件；然后定义一个变量 (@Input()  变量名） 接收父组件传入的参数

 

2.子组件调用父组件的方法

1️⃣在父组件的.html文件里面的子组件标签绑定要传到子组件的方法名；

/*父组件传入子组件的方法名为 fatherFunction
*/
<app-header [fatherFunction]="fatherFunction"></app-header>

 

2️⃣在父组件的.ts文件里面的子组件标签绑定方法；

 

3️⃣在子组件的.ts文件引入Input组件；然后定义一个变量 (@Input()  变量名） 接收父组件传入的方法名

 

 

3.把整个父组件传给子组件

1️⃣在父组件的.html文件里面的子组件标签绑定this；

/*把父组件home传给子组件header(this就是整个父组件)
*/
<app-header [home]="this"></app-header>

 

2️⃣在子组件的.ts文件引入Input组件；然后定义一个变量 (@Input()  变量名） 接收父组件