Question

我正在为项目使用模块化结构。

父路线为

 { path: 'questions', loadChildren: '../questions/questions.module#QuestionsModule'}

在孩子中，我有：

const routes: Routes = [
{
path: '',
component: QuestionComponent,
children: [
  {
     path: ':id',
     component: ViewComponent,
  },

  {
    path: 'ask',
    component: AskComponent,
    pathMatch: 'full'
  },
  {
    path: '',
    redirectTo:'/:id',
    pathMatch:'full'
 },
]}];

对于http://localhost:4200/questions/123和http://localhost:4200/questions/ask路线， ViewComponent正在加载。

这是我的带有路由的文件夹结构：https://stackblitz.com/edit/angular-sjd9u9

Answer 1

考虑“问题”路由模块中的路由：

const routes: Routes = [
{
path: '',
component: QuestionComponent,
children: [
  {
     path: ':id',
     component: ViewComponent,
  },

  {
    path: 'ask',
    component: AskComponent,
    pathMatch: 'full'
  },
  {
    path: '',
    redirectTo:'/:id',
    pathMatch:'full'
 },
]}];

:id只是路径中用于保存路由参数的插槽。

导航到http://localhost:4200/questions/ask时，会遇到以下情况：

:id === 'ask'

现在，看看第一个路径：

{
  path: ':id',
  component: ViewComponent,
}

路由器使用:id === 'ask'找到一个匹配项，因此呈现ViewComponent。

要解决此问题，您可以将路线更改为以下内容：

const routes: Routes = [
  {
    path: '',
    component: QuestionComponent,
    children: [
      { path: 'ask', component: AskComponent },
      { path: ':id', component: ViewComponent },
      { path: '', redirectTo: '/questions/:id', pathMatch: 'full' }
 }
]}];

Answer 2

问题是路由，请在参数解决之前添加静态链接

https://stackblitz.com/edit/angular-gkpabq?file=src/app/pages/index/index.component.html

  {
        path: '',
        component: QuestionComponent,
        children: [
          {
             path: 'test/:id',
             component: ViewComponent
          },



   {
        path: 'ask',
        component: AskComponent,
        pathMatch:'full'
      },
      {
        path: '',
        redirectTo:'/:id',
        pathMatch:'full'
     }


    <div>
    <div>
        <a [routerLink]="['/questions/test',123]">View Questiion </a>
    </div>
    <div>
        <a [routerLink]="['/questions/ask']">Ask Questiion</a>
    <span style="color:red">It is redirecting to View Question Page : Issue</span>
    </div>
</div>

Angular 7参数路由覆盖非参数路由

2 个答案: