时间戳

首页 > 解决方案 > Angular 9：延迟加载组件内的子路由不起作用

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

问题描述

我有应用程序组件，我在其中延迟加载带有组件 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>

标签： javascriptangular

解决方案

复杂的只有这些信息来帮助。但是角度导航数量组件/页面的方式。我认为您要做的是在组件之间导航（根据您的 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>

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

推荐阅读