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了

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替换,正常运行

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值