Angular10 组件之间的通讯

1 父组件和子组件之间的通讯

2 利用中间组件实现两个组件之间的通讯

3 利用服务实现两个组件之间的通讯

2017年8月26日20:09:13

　　待更新...

1 组件之间的关系图

　　1.1 父子关系

　　1.2 兄弟关系

　　1.3 没啥关系

2 组件之间有以下几种典型的通讯方案

　　2.1 直接父子关系

　　　　2.1.1 父组件直接访问子组件的 public 属性和方法

　　　　　　技巧01：父组件的视图中调用子组件的方法需要利用模板变量

　　　　　　技巧02：父组件的类中调用子组件的方法需利用@ViewChild装饰器

　　　　2.1.2 借助于 @Input 和 @Output 进行通讯

　　　　　　就是利用输入属性和输出属性来实现

　　　　　　技巧01：输入属性和输出属性需要用到属性绑定和事件绑定相关的知识

　　2.2 兄弟关系

　　　　利用他们共同的父组件进行通信【有点麻烦】

　　　　技巧01：此时他们的父组件相当于一个中间人

　　2.3 适用于任何关系的方法

　　　　2.3.1 借助于service单例进行通讯

　　　　2.3.2 利用cookie或者localstorage进行通讯

　　　　2.3.3 利用session进行通讯

3 直接调用

　　对于父子组件而言，父组件可以直接调用子组件的public型属性和方法

　　缺点：如果父组件直接访问子组件，那么两个组件之间的关系就被固定死了。父子两个组件紧密依赖，谁也离不开谁，也就都不能单独使用了。所以，除非你知道自己在做什么，最好不要直接在父组件里面直接访问子组件上的属性和方法，以免未来一改一大片。

　　3.1 利用模板变量实现

　　　　 Angular10 组件之间的通讯

　　3.2 利用@ViewChild实现

　　　　 Angular10 组件之间的通讯

　　3.3 代码汇总

　　　　》父组件

<div class="panel panel-primary">
  <div class="panel-heading">父组件</div>
  <div class="panel-body">
    <child #child1 ></child>
    <p>
      <label>获取子组件的info属性值为：</label>
      <span>{{child1.info}}</span>
    </p>
    <p>
      <button (click)="child1.greeting('王杨帅');">调用子组件的greeting方法</button>
    </p>
  </div>
  <div class="panel-footer">{{currentDate | date : "yyyy-MM-dd HH:mm:ss"}}</div>
</div>

HTML