0

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

我的代码

组件1.ts

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

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

组件1.html

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

组件2.ts

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

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

谢谢

4

4 回答 4

2

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

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

用于在其他页面上接收

constructor(public router: Router, public route: ActivatedRoute){}
route.params.subscribe(params => {
        let data = params['data']
    });
于 2019-12-18T13:22:42.957 回答
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()解码之后。

于 2019-12-18T13:21:40.477 回答
0

尝试这个

在组件 2 上

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

'param' value 是从组件 1 添加到 url 的值。

于 2019-12-18T13:26:29.183 回答
0

你可以这样通过：

路由.ts 

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

组件1.ts

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

组件2.ts

private route: ActivatedRoute // import ActivatedRoute
this.route.snapshot.paramMap.get('id');
this.route.snapshot.paramMap.get('name');
于 2019-12-18T13:21:29.400 回答