Angular 7.2.0带来了一个新方法

https://angular.io/api/router/NavigationExtras#state

发送:

    this.router.navigate(['action-selection'], { state: { example: 'bar' } });

收到:

    constructor(private router: Router) {
      console.log(this.router.getCurrentNavigation().extras.state.example); // should log out 'bar'
    }

你可以在这里找到一些额外的信息:

https://github.com/angular/angular/pull/27198

上面的链接包含了一个有用的例子: https://stackblitz.com/edit/angular-bupuzn

我需要访问CustomRouteReuseStrategy中的数据，由于循环依赖，我不能在那里注入路由器，但你也可以使用Location对象来读取状态。

Send:

    this.router.navigate(['action-selection'], { state: { example: 'bar' } });

Receive:
    import { Location } from '@angular/common';

    constructor(private location: Location) {
      console.log(this.location.getState().example); // should log out 'bar'
    }

在navigateExtra中，我们只能传递一些特定的名称作为参数，否则将显示如下所示的错误: 对于Ex-，我想在路由器导航中传递客户密钥，我这样传递

this.Router.navigate(['componentname'],{cuskey: {customerkey:response.key}});

但它显示一些错误如下:

Argument of type '{ cuskey: { customerkey: any; }; }' is not assignable to parameter of type 'NavigationExtras'.
  Object literal may only specify known properties, and 'cuskey' does not exist in type 'NavigationExt## Heading ##ras'

.

解决方案: 我们要这样写:

this.Router.navigate(['componentname'],{state: {customerkey:response.key}});

@dev-nish你的代码只需要稍作调整就能正常工作。 使

const navigationExtras: NavigationExtras = {
  state: {
    transd: 'TRANS001',
    workQueue: false,
    services: 10,
    code: '003'
  }
};

成

let navigationExtras: NavigationExtras = {
  state: {
    transd: '',
    workQueue: ,
    services: ,
    code: ''
  }
};

然后，如果你想特别发送一种类型的数据，例如，JSON作为表单填充的结果，你可以用之前解释的相同方式发送数据。

最新版本的angular(7.2 +)现在有了使用NavigationExtras传递额外信息的选项。

家组件

import {
  Router,
  NavigationExtras
} from '@angular/router';
const navigationExtras: NavigationExtras = {
  state: {
    transd: 'TRANS001',
    workQueue: false,
    services: 10,
    code: '003'
  }
};
this.router.navigate(['newComponent'], navigationExtras);

newComponent

test: string;
constructor(private router: Router) {
  const navigation = this.router.getCurrentNavigation();
  const state = navigation.extras.state as {
    transId: string,
    workQueue: boolean,
    services: number,
    code: string
  };
  this.test = "Transaction Key:" + state.transId + "<br /> Configured:" + state.workQueue + "<br /> Services:" + state.services + "<br /> Code: " + state.code;
}

输出

希望这能有所帮助!

Angular 7.2.0带来了一个新方法

https://angular.io/api/router/NavigationExtras#state

发送:

    this.router.navigate(['action-selection'], { state: { example: 'bar' } });

收到:

    constructor(private router: Router) {
      console.log(this.router.getCurrentNavigation().extras.state.example); // should log out 'bar'
    }

你可以在这里找到一些额外的信息:

https://github.com/angular/angular/pull/27198

上面的链接包含了一个有用的例子: https://stackblitz.com/edit/angular-bupuzn