Angular6.x学习笔记——组件详解之组件通讯

目录                                                

 1 前言

 2 Angular组件间的通讯

   2.1 父子组件间的通讯

     2.1.1 父组件设置子组件属性

     2.1.2 父组件调用子组件事件

     2.1.3 子组件向父组件发射事件

   2.2 非父子组件通讯

     2.2.1 Service

     2.2.2 路由传值

       2.2.2.1 传递一个值

       2.2.2.2 传递一个对象

 3 通用方式实现通讯

   3.1 localStorage

   3.2 服务端

4结语

  

1前言

前端框架,例如extjs,vue,angular等,都是或趋于组件化,所以组件间的通讯,是一个亟需解决的问题

一般而且言,这些组件之间都会形成这种树形结构

               图片来源:大漠穷秋

组件之间会有下列3种关系:

1父子关系

2兄弟关系

3没有直接关系

 

通常采用下列方式处理(某些方式是框架特有)组件间的通讯,如下:

1父子组件之间的交互(@Input/@Output/模板变量/@ViewChild)

2非父子组件(Service/localStorage)

3还可以利用Session等服务器端的解决方法

 

2Angular组件间的通讯

2.1父子组件之间的通讯

在父子组件之间通讯:

 @Input：是属性绑定，父组件向子组件传递数据

 @Output：是事件绑定，子组件向父组件传递数据的同时触发事件

 

2.1.1在父组件设置子组件上面的的属性

通过@input绑定子组件的属性,注意属性得是公开public的,私有private属性是无法传递的

es6新语法get/set.为属性提供了一个方便习惯的读/写方式, 拦截属性的存取行为。

在父组件设置该属性,就能够通过set方法来修改,从而实现在父组件设置子组件属性

代码如下

1 <h1>{{childTitle}}</h1>