Question

我在角度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]。

＆＃13;

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

＆＃13;

如果您想传递复杂类型，则需要将stringify传递给string并传递为string。当你得到它之后，你需要再次解析一个对象。

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

稍后访问

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

Answer 2

在当前版本中，@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

上使用的有效示例

Answer 3

您无法通过参数

传递数据列表

所以你需要转换为字符串对象列表然后传递

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

然后在解决此问题时进行解析

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

路由之间的角度传递数据

3 个答案: