Angular组件之间通讯
学习一下Angular组件之间通讯的一些知识,这里记录下一些知识点,也为其他人提供一些参考,如果有误,恳请指正。
Angular组件之间的通讯是松耦合的,两个组件数据交互的时候,数据提供方并不关心自己的数据将会提供给谁,数据的接收方也不关心数据来自哪里。这样会提高组件的重用性。
组件的通讯有输入、输出属性。
先说输入属性。
输入属性是被@Input()装饰器注解的属性,用来从父组件中接收数据。数据的流向是父组件=>子组件。
比如,子组件app-child中有一个string类型的属性 Child,父组件app-father中有一个变量Father,现在想做到,让子组件中的Child的值等于父组件中Father的值。
首先,子组件声明这个属性时应该用@Input()这样修饰:
@Input()
Child:string;
子组件html文件:
<div>
<p>我是子组件</p>
<p