Angular 在路由之间传递数据

Question

我在使用 angular 4 中的路由时遇到一点问题。你知道，当我尝试使用 navigate('root', data) 将数据从一个组件传递到另一个组件时，我刚收到 [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

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