我是Angular的新手，我已经找到了解决问题的方法，但不幸的是我还没有找到 . 当我将参数传递给路由器（类路由器）时，但是params列表（在目标站点上）是空的 .

let navigationExtras: NavigationExtras ={
  queryParams: {
    uri: item.uri
  }
}

this.router.navigateByUrl('articlelist/article-details', navigationExtras);

文章详细信息组件（路由是ActivatedRoute类）：

ngOnInit(): void {
        console.log("ArticleDetailsComponent " + JSON.stringify(this.route.url));
    this.route.queryParamMap.map(paramMap =>{
            this.uri = paramMap.get('uri');
            console.log(this.uri);
        });
    }

ArticleList模块中的路由（我的项目中的一个模块）：

const routes: Routes = [{
  path: '',
  component: ArticleListComponent,
    data: {
      title: 'ArticleList'
    },
  },
{
  path: 'article-details',
  component: ArticleDetailsComponent,
  data: {
    title: 'ArticleDetails'
  },
}
];

当我在目标组件中记录route.url时，结果是：

ArticleDetailsComponent {“_ isScalar”：false，“observers”：[]，“closed”：false，“isStopped”：false，“hasError”：false，“thrownError”：null，“_ value”：[{“path”： “物品详情”， “参数”：{}}]}

如果有人知道如何解决它，我将不胜感激帮助:)

3 回答

您应该使用 ActivatedRoute 以获取所有查询参数 .

试试这个 -

constructor(
    private activatedRoute: ActivatedRoute
  ) { }

this.activatedRoute.queryParams.subscribe(params => {
      const URI = params['uri'];
    });

更新

尝试发送这样的参数 -

this.router.navigate(['articlelist/article-details' ], {
      queryParams: {
        uri: item.uri || 'Default'
      }
    });

回复于 2024-05-02T23:22:55+08:00

0
我建议你不要依赖Observables来获取你的路线快照 . 这将为您提供一个包含params的简单对象 .
```
constructor(private route: ActivatedRoute) {}

ngOnInit() {
  console.log(this.route.snapshot.queryParams);
}
```
回复于 2024-05-02T23:22:55+08:00

您可以在app.routing.module.ts中定义参数：

{ path: 'examplePath/:id', component: YourComponent},

并发送这样的：

this.router.navigate(['/examplePath/' + id]); (with @angular/router/Router)

然后在组件构造函数中，您可以获得param（使用@ angular / router / ActivatedRoute）：

this.activatedRoute.params.subscribe(params => {
    this.yourObject = params['id'];
}

回复于 2024-05-02T23:22:55+08:00

在Angular 5路由中，queryParams列表为空

3 回答

更新

相关问题