angular - 如何使用 ngIf 进行条件路由

Question

Admin route.ts with child

const AdminRoutes: Routes = [{
     path: '', component: AdminComponent, children: [
    { path: 'dashboard', component: DashboardComponent },
    { path: 'adduser', component: AdduserComponent }, { path: 'userlist', component: UserlistComponent }, { path: 'userdetails', component: UserdetailsComponent }, { path: 'appliedleaves', component: LeavesAppliedComponent },
    { path: '', redirectTo: 'dashboard', pathMatch:'full' }]
}]

app-routing.ts

const routes: Routes = [
  { path: 'register', component: RegisterComponent },
  { path: 'login', component: LoginComponent },
  { path: 'employee', loadChildren: './employee/employee.module#EmployeeModule', canActivate: [authguardModule] },
  { path: 'admin', loadChildren: './admin/admin.module#AdminModule', canActivate: [authguardModule] }
  
];

我有一个管理模块。它有 3 个孩子：仪表板、用户列表、叶子。当我导航到管理员/用户列表时，我需要显示用户列表，其他所有类似。但它仅在我导航到仪表板或离开时才显示用户列表。

如何使用 *ngIf 实现这一点？喜欢：

<app-userdetails *ngIf="something here?"></app-userdetails>

标签： angular

Answer 1

这个场景可以在router模块中实现，你将在routes数组中进行如下操作：

[
{ path: 'userlist', component: your userlist component classname, for ex: 
UserListComponent },
{ path: 'dashboard', component: your dashboard component classname },
{ path: 'leaves', component: your leaves component classname }
]