Angular 在路由之间传递数据

Question

我在 angular 4 中使用路由时遇到一点问题。你知道，当我尝试使用 navigate('root', data) 将数据从一个组件传递到另一个组件时，我刚收到 [object Object],[object Object],[object Object] .

组件

export class FillRequestComponent implements OnInit {

  constructor(private route: Router, private dataRoute: ActivatedRoute) { }

  ngOnInit() {
    const key: Products = this.dataRoute.snapshot.params['objectProducts'];
    console.log(key);
  }

界面

export interface Products {

  color: string,
  question: string,
  surname: string,
  icon: string,
  selected: boolean,
  transparent: boolean
}

发送方式

const data = {
      category: this.optionSelected,
      objectProducts: this.optionSelected === 'CREDIT' ? this.productCreditList :
        this.productAccountsList
    };

    this.route.navigate(['/requests/fill', data]);

Answer 1

当您将一个对象作为路由参数传递时，它会调用该对象的 toString 并从该对象获得结果 [object Object]。

const obj = {};
console.log(obj.toString());

如果你想传递复杂类型，你需要将它 stringify 传递给 string 并作为 string 传递。拿到之后，还需要再解析成一个对象。

this.route.navigate(['/requests/fill', JSON.stringify(data)]);

稍后访问

const key: Products = JSON.parse(this.dataRoute.snapshot.params['objectProducts']);

Answer 2

您不能在参数中传递数据列表

因此您需要将对象列表转换为字符串，然后传递

navigate('root',   JSON.stringify(data))

然后在得到这个的同时进行解析

const key: Products =JSON.parse(this.dataRoute.snapshot.params['objectProducts']);

Answer 3

在当前版本中，现在可以在 @angular/router 中使用。

Angular 7.2 将路由状态引入 NavigationExtras，它采用类似于 queryParams 的对象文字，等等

状态可以命令式设置：

this.router.navigate(['example'], { 
  state: { example: 'data' } 
});

或声明式：

<a routerLink="/example" [state]="{ example: 'data' }">
  Hello World
</a>

并读入 顶级组件 使用：

this.router.getCurrentNavigation().extras.state;

或在子组件中使用：

window.history.state

添加了一个在 StackBlitz

上使用的工作示例

Angular 在路由之间传递数据

Angular Passing Data Between Routes

angular

angular-router