Question

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

我正在寻找类似的东西：

该应用程序以/ mainRoute
用户点击搜索按钮
导航至/ search
加载新路线/组件
用户选择X数据
我＆＃34;关闭＆＃34;当前路线（即返回/ mainRoute）
/ mainRoute组件现在具有X对象

在Angular1中，我使用promises实现了自己的路由服务：

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

Angular2中有这样的东西吗？我还读到了ngrx/router，但我发现没有类似的内容。

Answer 1

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

BTW承诺在Angular2中工作得很好。

<强> a.component.ts

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.component.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'
  }
}

<强> shared.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也是另一种选择。这个想法是你有一个应用程序状态，你可以在那里存储所有的应用程序数据。您可以拨打商店来获取数据，也可以调用 reducers 来更新您的应用数据。仅此一个主题就有很多内容可供讨论，因此我强烈建议您在尝试此方法之前先阅读此内容。

很抱歉这篇文章很长，但又想补充一点。 :) 在Angular2中，有一个resolve guard可用于预取任何路由的数据。它仍然需要某种可以从中获取数据的服务。但是如果你希望你的视图在你到达它时准备好渲染，那就太好了。 Here's more info about that

在Angular2路径之间传递数据类似于模态对话框

1 个答案: