Question

当我单击仪表板上时，我想在视图中显示一个子组件。我有仪表板组件，而“家”，“宠物”，预订都是子组件。当用户登录并重定向到仪表板时，我想显示主页组件，但URL仅保留仪表板。另外，当我想设置routerlinkactive时。请在下面找到我的代码。

路由模块：

const routes: Routes = [
  {
    path: 'dashboard',
    component: DashboardComponent,
    canActivate: [AuthGuard],
    children: [
      { path: 'home', component: DashboardHomeComponent },
      { path: 'booking', component: DashboardBookingComponent },
      { path: 'pets', component: DashboardPetsComponent },
      { path: 'profile', component: DashboardProfileComponent }
    ]
  }
];

侧边栏组件：

<div class="dashboard-left-outer">
    <div class="dashboard-menu">
        <ul>
            <li routerLinkActive="active"><a [routerLink]="['dashboard']"><p>dashboard</p></a></li>
            <li routerLinkActive="active"><a [routerLink]="['pets']"><p>pets</p></a></li>
            <li routerLinkActive="active"><a [routerLink]="['booking']"></i><p>booking</p></a></li>
        </ul>
    </div>
</div>

Answer 1

如果要停留在site.com/dashboard上并查看子页面，则可以使用本地存储来控制导航

//on init
this.localStoragePage = getPageFromLocalStorage() || 'home'

//on page link click you should update the local storage

//in dashboard page
<homeComponent *ngIf="this.localStoragePage ='home'" >
<petsComponent *ngIf="this.localStoragePage ='pets'" >

或者，如果您不打算更改URL，则可以从仪表板页面重定向到首页，例如@JB Nizet建议将其放在仪表板组件中：

this.router.navigate(['/dashboard/home'])

单击父组件时，角度显示子组件

1 个答案: