Question

在我的组件中，我有菜单项列表。一个包括其他页面。

menu.component.ts

selectedPost(postslug){
  console.log('post slg ', postslug);
    this._router.navigate([postslug]);
}

selectedPage(pageslug){
  console.log('page slg ', pageslug);
    this._router.navigate([pageslug]);
}

app.routing.module.ts

const routes: Routes = [
  {
    path: '',
    component: PostListComponent,
    pathMatch: 'full'
  }

  ,
  {
       path: ':postslug',  // This is for the posts 
      component: PostSingleComponent,
  }
    ,
  {
     path: ':pageslug',
     component: PageSingleComponent  // This is for the pages 
  }


];

据我所知，由于我传递的自定义slug应该拾取并加载正确的组件。但是它加载了第一个具有＆＃39;：+某事物＆＃39;。

有解决方法吗？

如果没有办法通过该功能推送自定义类别，并在路由中重定向到该类别？

例如在函数中：

  selectedPost(catName, postslug){
      console.log('post slg ', postslug);
        this._router.navigate([catName, postslug]);
    }

在路由中我会：

const routes: Routes = [
  {
    path: '',
    component: PostListComponent,
    pathMatch: 'full'
  }

  ,
  {
       path: 'catName/:postslug',  // This is for the posts 
      component: PostSingleComponent,
  }
    ,
  {
     path: ':pageslug',
     component: PageSingleComponent  // This is for the pages 
  }


];

Answer 1

尝试以下，

const routes: Routes = [
  {
    path: '',
    component: PostListComponent,
    pathMatch: 'full'
  }

  ,
  {
       path: 'posts/:postslug',  // This is for the posts 
      component: PostSingleComponent,
  }
    ,
  {
     path: 'pages/:pageslug',
     component: PageSingleComponent  // This is for the pages 
  }
];

点击，

selectedPost(postslug){
  console.log('post slg ', postslug);
    this._router.navigate(['posts',postslug]);
}

selectedPage(pageslug){
  console.log('page slg ', pageslug);
    this._router.navigate(['pages',pageslug]);
}

检查How Routing works here.上的文档，它详细解释了路由和导航。

希望这会有所帮助!!

Angular 2：使用不同类型的slugs进行路由

1 个答案: