Angular：无法导航到模块内的子组件答案

【问题标题】：Angular: Can not navigate to child components inside a moduleAngular：无法导航到模块内的子组件
【发布时间】：2019-11-21 06:32:32
【问题描述】：

我有一个项目仪表板，其中有 2 个子应用程序。

├───projects
│   ├───app1
│   │   ├───e2e
│   │   │   └───src
│   │   └───src
│   │       ├───app
│   │       │   ├───form
│   │       │   ├───home
│   │       │   └───page-not-found
│   │       ├───assets
│   │       └───environments
│   ├───app2
│   │   ├───e2e
│   │   │   └───src
│   │   └───src
│   │       ├───app
│   │       │   ├───core
│   │       │   ├───home
│   │       │   ├───mail-view
│   │       │   ├───mailbox
│   │       │   ├───models
│   │       │   ├───page-not-found
│   │       │   └───service
│   │       ├───assets
│   │       └───environments
│   └───app3
│       ├───e2e
│       │   └───src
│       └───src
│           ├───app
│           ├───assets
│           └───environments
├───resources
└───src
    ├───app
    │   ├───components
    │   │   ├───navigation
    │   │   └───progressbar
    │   ├───core
    │   │   ├───authentication
    │   │   └───service
    │   ├───dashboard
    │   │   ├───models
    │   │   ├───service
    │   │   └───widget
    │   ├───login
    │   └───shared
    │       ├───common
    │       │   ├───config
    │       │   └───service
    │       └───core
    ├───assets
    └───environments

从仪表板应用导航到 app1 和 app2 的工作正常。
app2 mail-view中，mailbox是home组件的子组件。

const routes: Routes = [
  { path: 'mail', redirectTo: 'mail/home', pathMatch: 'full' },
  { path: 'mail/home', pathMatch: 'full', component: HomeComponent,
    children: [
      { path: '', pathMatch: 'full', component: LoaderComponent },
      { path: 'mailbox/:type', component: MailboxComponent ,  resolve: { response: MailboxResolverService }},
      { path: 'mailbox/BLK/list/:header', pathMatch: 'full', component: BulkMailListComponent },
      { path: 'viewMail/:type/:mailId', pathMatch: 'full', component: MailViewComponent }
    ]
  /*canActivate: [AuthGuard]*/ },
];

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

当我尝试导航到任何子组件时，我收到错误“找不到路径”。

this.route.navigate(['./mailbox/', AppConstants.MAILBOX_TYPE.INBOX_I], {relativeTo: this.aRoute});

custom-error-handler.service.ts:25 Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'mail/home/mailbox/INBI'
Error: Cannot match any routes. URL Segment: 'mail/home/mailbox/INBI'
    at ApplyRedirects.push../node_modules/@angular/router/fesm5/router.js.ApplyRedirects.noMatchError (router.js:2459)
    at CatchSubscriber.selector (router.js:2440)

在使用子模块时是否有特殊的方式来声明子模块
或者是以不同的方式完成导航。

提前致谢。

【问题讨论】：

什么是./mailbox/ 路由中不需要.。给出完整路线/mail/home/mailbox
当您使用this.route.navigate(['/mailbox/']时，您的网址应该是/mail/home/
@Joel 我曾尝试使用“邮箱”，结果 URL 与“邮件/家庭/邮箱/INBI”相同。

标签： angular typescript routes

【解决方案1】：

./mailbox/ 是个问题。

应该如下所示。

this.route.navigate(['mailbox/', AppConstants.MAILBOX_TYPE.INBOX_I], {relativeTo: this.aRoute});

【讨论】：

我也试过这个，但没有帮助。 Getting Error: Cannot match any routes. URL Segment: 'mail/home/mailbox/INBI'

【解决方案2】：

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
You don't need to import like this just simple call your child component 
in view 
<ul>
<li>
  your parent
  <ul>
     <li> your child </li>
  </ul>
</li>
<ul>

【讨论】：

【解决方案3】：

经过几次尝试和错误，我发现是他的罪魁祸首pathMatch: 'full' 导致了这个问题。从
path: 'mail/home', pathMatch: 'full', component: HomeComponent
更改父路由参数后到
path: 'mail/home', component: HomeComponent
问题得到解决。根据 Angular -

路径匹配策略，'prefix' 或 'full' 之一。默认为“前缀”。

默认情况下，路由器从左侧检查 URL 元素以查看 URL 是否与给定路径匹配，并在匹配时停止。例如，'/team/11/user' 匹配 'team/:id'。

路径匹配策略“完整”匹配整个 URL。在重定向空路径路由时这样做很重要。否则，因为空路径是任何 URL 的前缀，即使导航到重定向目标，路由器也会应用重定向，从而创建无限循环。

似乎当pathmatch: 'full' 被赋予角度路由器时，在从父级获得第一次命中后不会查看其子级。在默认情况下pathMatch: 'prefix' 即使在第一次命中后，angular 也会查看子组件以获取剩余的 url 匹配。
这个 3 分钟的视频很好地解释了它 - https://www.youtube.com/watch?v=St2Gywjlwks

【讨论】：