Question

我有一个Project Dashboard，其中有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

从dashboard-app导航到app1和app2的工作正常。
在app2邮件视图中，邮箱是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)

使用子模块时是否有一种特殊的方法来声明子代
或者导航将以不同的方式进行。

谢谢。

Answer 1

./ mailbox /是个问题。

应该如下所示。

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

Answer 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>

Answer 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

角度：无法导航到模块内的子组件

3 个答案: