9父子组件之间通讯

1:父组件传给子组件
1) 父组件给子组件传值
步骤如下：
a. 父组件调用子组件时传入数据
比如定义两个组件home和head，父组件home里定义数据str,home组件调用head组件时：

<app-head [data]="str">app-head>

b. 子组件引入input模块

import { Component, OnInit,Input} from '@angular/core';

c.子组件获取数据

	@Input() data: any;//然后就可以使用data了

和上面一样，父组件里定义run方法，父组件调用子组件时注意绑定时：

	<app-head [data]="str" [fun]="run">app-head>

run不要加括号，加括号会执行
然后子组件引入Input模块，子组件获取方法和上面一样


3) 把整个父组件传给子组件
调用子组件时[home]="this",然后声明Input,然后获取home

2:子组件传给父组件
记得之前的ViewChild吗？不仅可以操作子组件的dom，还可以获取整个子组件（注意获取ViewChild后使用的时机，放在ngAfterViewInit里面，或者定义按钮绑定事件里操作，按钮事件是手动触发的，肯定是视图加载完成之后，所以没问题）
上面的两种方法必须掌握，Angular还可以通过事件驱动结合@Output来实现父子组件之间的通讯（了解即可）
就先不花时间学了，以后要用的话再去看，视频地址：https://www.bilibili.com/video/av38362631/?p=9，大概23分57秒

3：非父子组件之间的通信
用的最多的就是localstorage和服务

4：生命周期函数
见文档https://www.angular.cn/guide/lifecycle-hooks
顺便说一下，一般代码都是在app下添加组件的，整个项目太大，复制整个项目太费时也浪费空间，一般复制src文件夹，然后新建一个项目将src替换，正常运行

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