关于Angular4 数据传递方式的总结。

最近开发Angular前端发现Angular 有很多值得学习的地方，打算做下整理记录一下开发技巧。简单的就不记录了。

路由传递参数

路由配置好后：

第一种情况  由A传到B

step1：在A页面引入 Router，并声明

import {Router} from '@angular/router';
constructor(private router: Router) {}

step2：执行代码

/...  省略代码
/**
* commands 是你路由的地址
* extras  它是一个NavigationExtras对象，表示在导航时用到的额外选项
*在官网中找到的 其中有一个属性queryParams  类型是Params 即我们要传递的参数可以放在这个属性下
*所有可以写成
*extras = {
*    queryParams  ：{
*        id：'123456',
*        ...
*      }
*}
*commands = '你自己路由的地址'
*/
function fun(commands，extras){
    this.router.navigate（commands，extras）
}
... end/

step3：在B页面引入 ActivatedRoute，ParamMap 并声明

 

import { ActivatedRoute，ParamMap } from '@angular/router';
// 这里导入 switchMap 操作符是因为你稍后将会处理路由参数的可观察对象 Observable
import { switchMap } from 'rxjs/operators';
constructor(private route: ActivatedRoute) {}

step4：拿到从A传到B页面的代码；

/...  省略代码
this.route.paramMap.pipe(
    switchMap((params: ParamMap) =>
     console.info(params.get('id'))
    )
  );
... end/

或者

/...  省略代码
this.route.queryParams.subscribe(queryParams => {});
... end/

总结  从A到B是最基础的传递方式，基础流程就是以上所述，值得关注的是 NavigationExtras 对象，它对路由的影响结果和状态还是很大的。
Router 提供导航和操纵 URL 的能力。把需要传递的参数封装在 NavigationExtras 对象中，通过 navigate(）方法将参数传递到子路由中，
再通过 ActivatedRoute，ParamMap 对象拿到参数。值得注意的是这种方式只能传基本数据类型，且会在url上暴露出来。

第二种情况  可以处理由B回传到A

由B回传到A

这里可以操作的空间就很多了

我们知道@Output  子作用域触发事件执行响应函数，而响应函数方法体则位于父作用域中，相当于将事件“输出”到父作用域中，在父作用域中处理。
Output  一般都是一个 EventEmitter 的实例，使用实例的 emit 方法将参数 emit 到父组件中，触发父组件中对应的事件。
所以第一种方式就是利用一个 EventEmitter 来接发收消息
我们可以写一个服务  
获取一个 EventEmitter 单例

import {EventEmitter, Injectable} from '@angular/core';

@Injectable()
export class DomeService {
  //public eventEmit: EventEmitter = new EventEmitter();
  //或者
  private _eventEmit: EventEmitter;

  public get eventEmit(){
      if(this._eventEmit === null){
          this._eventEmit = new EventEmitter();
      }
       return this._eventEmit;
      }
  }
}

在A中

import {DomeService} from '../...';
constructor(private service: DomeService) {}
/...  省略代码


/**
message就是你发送的消息 这个message可以是一个对象也可以是一个文本
*/
function fun(){
  this.service.eventEmit.subscribe((message: any) => {
    //TODO 对message 操作 
})
}
... end/

在B中

import {DomeService} from '../...';
constructor(private service: DomeService) {}
/...  省略代码


/**
message就是你发送的消息 这个message可以是一个对象也可以是一个文本
*/
function fun(msg){
  this.service.eventEmit.emit(msg)
}

这一种方式相当于一个广播 这个广播在组件没有销毁的时候将监听所有向这个eventEmit对象发送的消息并处理。当然你可以不写在服务中，直接写在你所需要的组件中。

再介绍一个方式。就是写一个服务（Injectable）来实现数据的传递。这种方式无论是A到B还是B到A都可以实现，适合大多数情况。

这种情况下你是写普通的bean 定义参数的get set 方法就好了。

当然在这个基础上可以加上Subscribe  和 Observable

而且不会暴露你的数据。

 

我们也可以使用 SessionStorage和LocalStorage。管理得当也是没有问题的。

在后面的开发中有好的例子将持续更新。