angular - 如何检索通过 NavigateByUrl 传递给 Angular 路由的 queryParams

Question

如何从 Angular 的目标组件中检索NavigationExtras使用navigateByUrl如下所述传递的参数？

let extras: NavigationExtras = {
                queryParams : {
                    errorTitle: 'Erreur Technique',
                    errorBody: 'URL erronée'
                }
            };
this.router.navigateByUrl(RoutesUrl.ERROR, extras);

Answer 1

您可以Activated Route通过将其注入组件来使用它。

 constructor( private activatedRoute: ActivatedRoute  ) {}

 ngOnInit(): void {
     this.activatedRoute.queryParams.subscribe((params: Params) => {
        this.params = params;
    });
 }

或者您可以从其激活的路线中获取 queryParams'snapshot

 ngOnInit(): void {
    const params = this.activatedRoute.snapshot.queryParams;
    console.log(params.errorTitle);
    console.log(params.errorBody);
}

Answer 2

soulfresh我在这个 GitHub 问题中建议了我找到的解决方案： https ://github.com/angular/angular/issues/18798

我这样称呼我的路线：

this.router.navigateByUrl(this.router.createUrlTree([RoutesUrl.ERROR], {
                queryParams: {
                    errorTitle: 'Erreur Technique',
                    errorBody: 'URL erronée'
                }
}));

然后我以这种方式检索查询参数：

this.activatedRoute.queryParamMap.subscribe(params => console.log(JSON.stringify(params)))

或者

this.activatedRoute.queryParams.subscribe(params => console.log(JSON.stringify(params)))

更新

如果您不希望您queryParams出现在地址栏 (URL) 中，您可以使用：

发送数据：

constructor(private router: Router) {} 

ngOnInit(){
    this.router.navigate([RoutesUrl.ERROR], {
                    state: {
                        errorTitle: 'Erreur Technique',
                        errorBody: 'URL erronée'
                    }
    });
}

检索数据：

constructor(private router: Router) {
      this.errorTitle = this.router.getCurrentNavigation().extras.state.errorTitle;
      this.errorBody = this.router.getCurrentNavigation().extras.state.errorBody;
  }