Question

我正在研究角度应用程序，并意识到在最新版本的角度应用程序中，可以通过路由将数据传输到另一个组件。我已经浏览了一些博客，但是我对如何做到这一点并不十分清楚。

我的代码

component1.ts

sendMessageto2() {
    par = this.param
    this.router.navigate(['/vav'],{state : {data : {par}}})
    console.log(this.param)
  }

我想将变量this.param传递给component2

component1.html

<area shape="rect" coords="818,232,917,262" (click)="sendMessageto2()">

component2.ts

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

我不确定如何在component2中获取此数据。我遇到map的错误。找不到地图。有人可以帮我吗？

谢谢

Answer 1

我假设您要传递的数据是一个字符串。这样定义您的路线，

const routes: Routes = [
  { path:'', component : C1Component },
  { path:'vav', component : C2Component },
];

路由时，将URL中的值添加为queryParams，

let navigationExtras: NavigationExtras = {
    queryParams: {
        "data"   : encodeURIComponent('Your data'),
    }
};

this.router.navigate(["vav"], navigationExtras);

使用queryParams在第二个组件中获取ActivateRoute，

decodeURIComponent(this.route.snapshot.queryParams['data']);

演示：https://stackblitz.com/edit/angular-5zw742

如果数据是对象，则在编码之前JSON.stringify()，在解码之后JSON.parse()。

Answer 2

对于传递数据，您可以这样做

this.router.navigate(["/vav", { 'data': data }]);

用于在其他页面上接收

constructor(public router: Router, public route: ActivatedRoute){}
route.params.subscribe(params => {
        let data = params['data']
    });

Answer 3

您可以这样通过：

routing.ts

{path: 'component2', component: YourComponent2} // configure it in the routing file

component1.ts

private router: Router // import router
this.router.navigate(['/component2', {id: '1', name: 'surjeet'}]);

component2.ts

private route: ActivatedRoute // import ActivatedRoute
this.route.snapshot.paramMap.get('id');
this.route.snapshot.paramMap.get('name');

Answer 4

尝试

关于组件2

ngOnInit() {
    this.state$ = this.route.snapshot.paramMap.get('param') ; 
  }

'param'值是已添加到组件1的url中的值。

通过角向路由将数据发送到另一个组件

4 个答案: