如何检索通过 NavigateByUrl 传递给 Angular 路由的查询参数

Question

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

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;
  }

如何检索通过 NavigateByUrl 传递给 Angular 路由的查询参数

How to retrieve queryParams passed to an Angular route via NavigateByUrl

routes

queryparam

angular

angular-router-params

更新