Angular 2路由器中的非Url参数

Question

在角度1.*中,我使用ui-router并且能够将NON URL参数从一个状态传递到另一个状态.通过NON URL参数,我的意思是传递一些不出现在URL上的参数(这对用户来说是完全透明的).

在Angular 1.*中执行此操作的方法是通过定义这样的状态(stateToRedirect是非url参数)

   $stateProvider
    .state('LOGIN_STATE', {
      url: `login`,
      component: 'login',
      params: {
        stateToRedirect: 'home'
      }
    });

并改变这样的状态:

  $state.go('LOGIN_STATE', {
    stateToRedirect: 'OTHER_STATE',
  });

在LOGIN_STATE中,我能够访问此参数:

$stateParams.stateToRedirect;

我正在尝试为Angular 2路由器找到相同的行为,我的理解是Angular 2路由器已经改进了很多,我们可能不需要使用ui-router-ng2.

所以我的问题是:你如何在Angular 2路由器中重现上述行为？

这个问题似乎是我想要的,但我不想在URL中使用参数,并且路径上的'data'属性看起来不错,但我找不到关于如何动态设置它的文档.

Answer 1

您要问的问题更多是关于组件到组件的通信而不是路由本身.您需要的是将数据从一个组件(与特定路由关联)传递到另一个组件(与另一个路由关联).

可以通过以下方式实现组件到组件的通信

1. 具有父子关系的组件可以通过@Input()和@Output()装饰器和事件发射器传递数据

2. 通过使用服务.不共享驻留在同一模块中的父子关系的组件可以通过服务共享数据,或者通过使用Observable序列(具有生产者 - 消费者模型),或者通过在变量中设置数据并相应地读取.通过向根(或两者为父)模块注册服务,可以将此方法扩展到驻留在不同模块中的组件.

3. 通过路由器.数据可以作为路径参数通过路由器传递,例如:my/path/thisisapathvalue,可选参数(使用矩阵表示法),例如,my/path;item=hello;item2=world或通过查询字符串参数,例如my/path?item=hello&item2=world.您还可以使用解析保护来解析特定组件的数据,解析保护可以解析静态数据,从服务器检索的数据,通过功能解析等.

对于您的场景,您最需要的是一个服务,它将源组件与目标组件之间的数据进行通信,因为即使使用解析保护来解析数据,您也需要一个额外的服务来临时存储数据.你需要通过.