Question

路由规则是：

const routes: Routes = [{
    path: "",
    component: SkeletonComponent,
    children: [{
      path: "dictionary",
      component: DictionaryComponent,
      children: [
        {
          path: ":dict/:code",
          component: VersionsComponent
        }]
}];

URL如下：

http://localhost:4200/dictionary/Gender/5

其中Gender是参数:dict，而5是参数:code。

我试图在组件VersionsComponent中获取参数：

ngOnInit() {
    console.log(this.activateRoute.snapshot.params['dict']);
    console.log(this.activateRoute.snapshot.params['code']);
}

我总是得到undefined

Answer 1

最有效的方法（在所有情况下均有效）是订阅“激活的路由”。即使您无需在组件之间切换，也只需更改URL的参数化部分，它便会起作用。

this.activatedRoute.params.subscribe(
  (params: Params) => {

    console.log(params.dict)

  }
)

如果您不订阅params，则代码仅在最初加载组件时有效。之后，您需要离开该组件以使其再次工作。通过订阅，您可以加载多个资源，而无需离开组件。

Answer 2

如上所述，请使用paramMap。请参阅stackblitz

  ngOnInit() {
    this.activatedRoute.paramMap.subscribe((data)=>{
      console.log(data.params)
    })
  }

Answer 3

我认为您的路线配置有误，应该这样：

const routes: Routes = [
  {
    path: '',
    component: SkeletonComponent
  },
  {
    path: "dictionary",
    component: DictionaryComponent,
    children: [{
      path: ":dict/:code",
      component: VersionsComponent
    }]
  }
];

，并确保在DictionaryComponent上使用<router-outlet>

获取路径参数Angular？

3 个答案: