如何通过路由器将数据从角度组件传递到另一个组件？

Question

I'm tried to pass data from angular component to another component via a router. Any elegant solution?

I tried this and it's working.

this.router.config.forEach(route => {
    if (route.path === 'pages') {
        route.children.forEach((child) => {
            if (child.path === 'saveName') {
                child.data = {
                    name: "Jack"
                };
            }
        });
    }
});

this.router.navigate(['/pages/saveName']);

And also send a file with data.

Just want to know whether there is a more elegant solution, like the one below.

this.router.navigate(['/pages/saveName'],{"name":"Jack"});

Answer 1

是的，请查看文档 ：

this.router.navigate(['/heroes', { id: heroId, foo: 'foo' }]);

Answer 2

I think is better solution.Check following above Link.

https://angular.io/guide/router#fetch-data-before-navigating

Answer 3

Angular 7.2 supports passing data via a state object during navigation

You can pass the state object in navigateByUrl method

this.router.navigateByUrl('/path', { state: { hello: 'world' } });

or

Pass Data using routerLink directive

<a routerLink="/path" [state]="{ hello: 'world' }">Go</a>`

And Read the data using paramMap Observabele to filter only window.history.state

 constructor(public activatedRoute: ActivatedRoute) {}

  ngOnInit() {
    this.state$ = this.activatedRoute.paramMap.pipe(
      map(() => window.history.state)
    );
  }

Check this link: https://netbasal.com/set-state-object-when-navigating-in-angular-7-2-b87c5b977bb