我们可以尝试使用Angular中的NavigationExtras来解决这个问题。NavigationExtras可以传递数据并指定导航方式。例如,使用queryParams选项可以通过url向目标组件传递数据。
示例代码如下:
componentA.ts中:
import { Router } from '@angular/router';
constructor(private router: Router) { }
onBtnClick() {
this.router.navigate(['/componentB'], { queryParams: { 'id': 123 } });
}
componentB.ts中:
import { ActivatedRoute } from '@angular/router';
constructor(private route: ActivatedRoute) {
this.route.queryParams.subscribe(params => {
console.log(params['id']);
});
}
在这个示例中,我们通过queryParams选项将数据(id=123)传递到componentB组件中,并在componentB中使用ActivatedRoute来获取传递的数据。