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了
2) 父组件给子组件传方法
和上面一样,父组件里定义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替换,正常运行