Angular 9：延迟加载组件内的子路由不起作用答案

【问题标题】：Angular 9 : Children routing inside lazy loaded component not workingAngular 9：延迟加载组件内的子路由不起作用
【发布时间】：2020-06-03 08:20:46
【问题描述】：

我有应用程序组件，我在其中延迟加载带有组件 profilecomponent 的 create-new-module。现在在配置文件组件中，我点击 router.navigate 并尝试加载另一个子项详细信息来代替配置文件，但它不起作用，控制台中也没有错误。

请帮忙

// App component route

const routes: Routes = [
  {
    path: 'create-new-emp',
    loadChildren: () => import('./create-new-emp/create-new-emp.module').then(c => c.CreateNewEmpModule),
  },
  { path: '',  redirectTo: 'create-new-emp', pathMatch: 'full'},
  { path: '**',  redirectTo: 'create-new-emp'}
];


// Emp Module Route

const routes: Routes = [
  { path: '', component: ContainerComponent,
  children: [
    { path: '', component: ProfileComponent, outlet: 'form'},
    { path: 'profile', component: ProfileComponent, outlet: 'form'},
    { path: 'detail', component: DetailComponent, outlet: 'form' }] }
];

// Trying to hit below link but not working

this.router.navigate(['detail'])

<app-component>
<router-outlet>
<container-component>
<profile-component></profile-component>
</container-component>
</router-outlet>
</app-component>

【问题讨论】：

我建议您在 stackblitz.com 上创建一个项目来重新创建您的场景，这样我们可以在这里为您提供更好的帮助。

标签： javascript angular

【解决方案1】：

只有这些信息才能提供帮助。但是角度导航数量组件/页面的方式。我认为您要做的是在组件之间导航（根据您的 router.ts）。如果你想导航，你只需要在你的html代码中使用router-outlet，而不是在HTML代码中使用组件标签。

改变这个：

<app-component>
<router-outlet>
<container-component>
<profile-component></profile-component>
</container-component>
</router-outlet>
</app-component>

对此：

<app-component>
<router-outlet>
</router-outlet>
</app-component>

然后，进入 ContainerComponent.html，您需要重复导航到配置文件的详细信息，因为这些是子路由。

<router-outlet></router-outlet>

这将为您提供有关所需内容的更多信息。

【讨论】：

里面什么都没有……我只是想知道我的 DOM 结构是什么

【解决方案2】：

这个信息很难说，但可能......你应该定义路由器出口名称

<router-outlet  name="form"></router-outlet>

希望对你有所帮助。

【讨论】：