在 Angular2 路由之间传递数据，类似于模式对话框

Question

是否可以在Angular2中从一条路线返回数据到另一条路线？类似于使用模态搜索/选择一些数据，然后将其返回。

1. 应用程序从/mainRoute开始。
2. 用户单击搜索按钮
3. 导航到/搜索
4. 加载新路由/组件
5. 用户选择X数据
6. 我“关闭”当前路线（即返回/主路线）
7. /mainRoute组件现在具有X对象

在Angular1中，我做了我自己的路由服务，它通过promise实现了这一点：

MyRouter.openView('/...../').then(function(returnData){ })

在Angular2中是否有类似的东西？我也读过关于ngrx /路由器的信息，但我没有发现与此类似的内容。

Answer 1

听起来您想在多个路由组件之间共享数据。一种常见的模式是构建一个服务，该服务被共享/注入到您想要共享该数据的任何组件中。然后，您可以通过服务从每个组件调用、写入或读取数据，以获取相同的数据。

import { Component, OnInit } from '@angular/core';
import { SharedService } from './shared.service.ts';

@Component({
  selector: 'my-component-a',
  templateUrl: 'a.component.html'
})
export class ComponentA implements OnInit {
  constructor (private sharedService: SharedService) {}

  ngOnInit () {
    this.sharedService.write('Hello from component A');
  }
}

b .组件. ts

import { Component, OnInit } from '@angular/core';
import { SharedService } from './shared.service.ts';

@Component({
  selector: 'my-component-b',
  templateUrl: 'b.component.html'
})
export class ComponentA implements OnInit {
  constructor (private sharedService: SharedService) {}

  ngOnInit () {
    let message = this.sharedService.read();
    // message should now be the string `Hello from component A'
  }
}

共享.service.ts

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

@Injectable()
export class SharedService {
  private message: string = null;

  constructor () {}

  read () {
    return this.message;
  }

  write (newMessage: string) {
    this.message = newMessage;
  }
}

ngrx/store也是另一种选择。那里的想法是，你有一个单一的应用程序状态，你可以在那里存储所有的应用程序数据。您可以调用商店以获取数据，也可以调用化简器来更新您的应用程序数据。仅这个主题就有很多内容要涵盖，因此我强烈建议在尝试此方法之前先阅读此内容。