angular学习笔记 父子组件传值

时间:2021-10-16 06:15:04

一、如何将父组件的值传到子组件?

在子组件里面引入Input,然后用@Input 变量1 接收

angular学习笔记  父子组件传值

接着在父组件中的,子组件标签上添加[msg]="msg",中括号里的名字要与子组件中@Input 后面的名字相同

angular学习笔记  父子组件传值

然后就可以在子组件里调用传过去的msg

父组件赋值:angular学习笔记  父子组件传值

子组件使用:angular学习笔记  父子组件传值

angular学习笔记  父子组件传值

二、如何子组件传值到父组件?

首先在子组件里面引入Output,EvnentEmitter,然后实例化EvnentEmitter,最后广播

angular学习笔记  父子组件传值

然后在父组件里

angular学习笔记  父子组件传值

angular学习笔记  父子组件传值

触发事件后就会获得结果

angular学习笔记  父子组件传值