javascript - 使用 Angular 7 在子组件中无法访问子行

Question

我刚开始学习 Angular 7，对路由有点困惑。我在 app-routing 模块中创建了一个路由配置，并在 message-routing 模块中创建了子行。

我希望这些路线：

/
/message
/message/inbox
/message/new
/about

但是 messageComponent 内部的路由不可访问：

无法匹配任何路由。URL 段：“消息/新消息”

这些是我的配置：

应用程序路由.module.ts：

const routes: Routes = [
  {
    path: '',
    component: HomeComponent
  },
  {
    path: 'message',
    component: MessageComponent
  },
  {
    path: 'about',
    component: AboutComponent
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})

消息路由.module.ts：

const routes: Routes = [
  {
    path: 'message',
    component: MessageComponent,
    children: [
      {
        path: '',
        component: InboxComponent
      },
      {
        path: 'new',
        component: NewComponent
      }
    ]
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})

app.module.ts：

@NgModule({
  declarations: [
    AppComponent,
    MessageComponent,
    HomeComponent,
    AboutComponent,
  ],
  imports: [
    BrowserModule,
    MessageRoutingModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

这是我的文件夹结构：

Answer 1

这是一个例子：

子路由.module.ts

const routes: Routes = [
  {
    path: 'child,
    component: ChildComponent
    canActivate: [YourGuard],
    children: [{
      path: '',
      component: ChildAComponent
    },
    {
      path: 'some-route',
      component: ChildBComponent
    }]
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  providers: [YourGuard],
  exports: [RouterModule]
})
export class ChildRoutingModule { }

应用程序路由.module.ts

const routes: Routes = [
  {
    path: 'other-route,
    component: OtherComponent
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

在app.module.ts中：

...
import:[
   ChildRoutingModule,
   AppRoutingModule
]

Answer 2

我通过向 message-routing.module.ts 添加收件箱和新组件解决了这个问题。我不确定这里是否是添加它们的最佳位置，但这解决了问题。

消息路由.module.ts：

const routes: Routes = [
  {
    path: 'message',
    component: MessageComponent,
    children: [
      {
        path: '',
        component: InboxComponent
      },
      {
        path: 'new',
        component: NewComponent
      }
    ]
  }
];

@NgModule({
  declarations: [InboxComponent, NewComponent],
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})