路由之间的角度传递数据

Posted 2023-02-22

【中文标题】路由之间的角度传递数据

【英文标题】：Angular Passing Data Between Routes

【发布时间】：2018-09-14 19:45:01

【问题描述】：

我在使用 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]);

【问题讨论】：

我发现通过路线传递对象不是一种友好的模式，因为拥有路线的主要目的是让用户可以直接在那里导航。如果他们直接在那里导航，父母仍然能够传递对象吗？通常不会。

【参考方案1】：

在当前版本中，现在可以在 @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上使用的工作示例

【讨论】：

navigate(commands: any[], extras?: NavigationExtras) /example 应该作为列表发送吗？

链接：Stackblitz 请您检查一下这不起作用

我知道了，必须在constructor中提及

将此行移至构造函数有效！ this.name = this.router.getCurrentNavigation().extras.state.example;

有谁知道为什么this.router.getCurrentNavigation().extras.state 在子组件中不起作用？

【参考方案2】：

当您将对象作为路由参数传递时，它会导致对该对象调用 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']);

【讨论】：

我认为这不是一种可扩展的做事方式，将所有这些数据放在 URL 中，用于字符串化然后解析......似乎不是解决这个问题的正确方法。跨度>

【参考方案3】：

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

所以你需要将对象列表转换成字符串然后通过

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

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

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