Question

我可能很难阐明这个问题，但是我确实有一个StackBlitz可以帮助您。

https://stackblitz.com/edit/angular-brhyir

注意延迟加载“用户” ...

app.routes.ts

//import { NgModule } from '@angular/core';
import { Routes } from '@angular/router';
import { SecureComponent } from './layouts/secure.component';
import { HelloComponent } from './hello.component';

//SECURE
export const SECURE_ROUTES: Routes = [
{ path: '',
  component: HelloComponent,
  data: {
  }
},

//Lazyloading
{ path: 'users',
  data: {
  breadcrumb: 'Users',
},
loadChildren: './users/user.module#UserModule' }
];

export const routes: Routes = [
 { path: '', component: SecureComponent, data: { title: 'Secure Views' }, 
 children: SECURE_ROUTES },

];

这可行，但是...

user.routes。 ts

import { Routes } from '@angular/router';
import { UsersComponent } from './users.component';
import { UserComponent } from './user/user.component';
import { UserTwoComponent } from './user/user-two.component';

export const UserRoutes: Routes = [

  { path: '',
  component: UsersComponent,
  children: [
    {
      path: 'user',
      component: UserComponent,
      data: {
        breadcrumb: 'New'
      },
      children: [
        {
          path: 'user2',
          component: UserTwoComponent,
          data: {
            breadcrumb: 'New2'
          }
        }
      ]
    }
   ]
  }
];

因此，如果您单击按钮，您将看到问题。也就是说，路由是正确的（用户/用户），但它不会加载“ UserComponent”，而是仍显示“ User s Component”。为什么我不知道？

Answer 1

您必须在将呈现子路径的任何目标组件的模板中包含<router-outlet></router-outlet>。

UsersComponent和UserComponent都没有<router-outlet>来呈现其他路线。

Answer 2

存在三个问题：

在users.component.ts中，您需要进行一些小的修改
```
toUser() {
   this.router.navigate(['user'], {relativeTo: this.route});
}
```
这是必要的，以便告诉angular将您路由到相对于您当前所在路径的相对的某个路径。
user.component.ts中的内容，
```
toUserTwo() {
   this.router.navigate(['user2'], {relativeTo: this.route});   
}
```
要使这两个点同时起作用，您需要在各自的构造函数中注入ActivatedRoute。您需要从@angular/router
接下来，您需要在user.component.html和users.component.html
中添加以下内容
```
<router-outlet></router-outlet>
```
这是在父模板中呈现子路由所必需的。

这里是stackblitz，如果您需要查看它的有效示例。

Angular 7 LazyLoading带孩子的孩子

2 个答案: