角度 9 :在延迟加载组件内路由的子项不工作

Question

我有一个应用程序组件，我在其中延迟加载带有组件配置文件组件的创建新模块。 现在在配置文件组件中，我点击了router.naving并尝试加载另一个子详细信息来代替配置文件，但它不起作用，控制台中也没有错误。

请帮忙

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

Answer 1

只有这些信息可以提供帮助。但是角度导航数量组件/页面的方式。我认为您要做的是在组件之间导航(根据您的路由器.ts(。如果要导航，则只需要在 html 代码中使用路由器出口，而不需要在 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您需要重复以导航到详细信息 o 配置文件，因为这些是子路由。

<router-outlet></router-outlet>

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

Answer 2

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

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

希望对您有所帮助。