Angular组件之间通讯

Angular组件之间通讯

学习一下Angular组件之间通讯的一些知识，这里记录下一些知识点，也为其他人提供一些参考，如果有误，恳请指正。

---

Angular组件之间的通讯是松耦合的，两个组件数据交互的时候，数据提供方并不关心自己的数据将会提供给谁，数据的接收方也不关心数据来自哪里。这样会提高组件的重用性。

组件的通讯有输入、输出属性。

先说输入属性。
输入属性是被@Input()装饰器注解的属性，用来从父组件中接收数据。数据的流向是父组件=>子组件。
比如，子组件app-child中有一个string类型的属性 Child，父组件app-father中有一个变量Father，现在想做到，让子组件中的Child的值等于父组件中Father的值。
首先，子组件声明这个属性时应该用@Input()这样修饰：
@Input()
Child:string;

子组件html文件：

<div>
<p>我是子组件</p>
<p