Question

我有一个应用程序组件，在其中我通过组件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>

Answer 1

仅对这些信息有所帮助。而是角度导航数量组件/页面的方式。我认为您要尝试的是在各个组件之间导航（根据router.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，您需要重复操作以导航至配置文件的详细信息，因为这些是子路径。

<router-outlet></router-outlet>

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

Answer 2

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

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

希望有帮助。

Angular 9：在惰性加载的组件内路由的子代无法正常工作

2 个答案: