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

一：ViewChild操作DOM

1. 绑定元素

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

 使用ViewChild获取DOM操作

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

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

　　在ngAfterViewInit(){}中this调用；

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

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

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

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

// 在父组件的.html文件中添加子组件，定义 #变量

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

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

　　在ngAfterViewInit(){}中this调用；

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

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

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

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

/*
header是home的子组件
*/
"title">

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

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

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

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

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

/*父组件传入子组件的方法名为 fatherFunction
*/
"fatherFunction">

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

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

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

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

/*把父组件home传给子组件header(this就是整个父组件)
*/
"this">

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

转载于:https://www.cnblogs.com/pan5008/p/11434555.html

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！