时间戳

首页 > 解决方案 > 子路由在其下方显示父级的 html 组件

angular - 子路由在其下方显示父级的 html 组件

问题描述

在仪表板组件内部，我有我的配置文件组件。当我进入dashboard/my-profile页面时，我的个人资料就起作用了！显示为 my-profile html 组件中的代码，但在仪表板 html 页面（组件）下方呈现。当有人去那条路线时，我希望只显示我的个人资料页面（组件）。我做错了吗。

在应用程序路由 ts 文件中

import { DashboardComponent } from './dashboard/dashboard.component';
import { MyProfileComponent } from './dashboard/my-profile/my-profile.component'
const routes: Routes = [
     { 
         path: 'dashboard', component: DashboardComponent, canActivate: [AuthGuard], resolve: {"key": ProfileDetailsResolverService}, 
         children: [
             {path: 'my-profile', component: MyProfileComponent }
         ]
        },
];

应用模块 ts 文件

 import { DashboardComponent } from './dashboard/dashboard.component';
    import { MyProfileComponent } from './dashboard/my-profile/my-profile.component'

@NgModule({
  declarations: [
   DashboardComponent,
   MyProfileComponent

仪表板组件 html 文件的第一行

<router-outlet></router-outlet>

应用组件

<div>
  <router-outlet #outlet="outlet"></router-outlet>
</div>

标签： angular

解决方案

<router-outlet></router-outlet>从 DashboardComponent html 模板中移除。

路由

import { DashboardComponent } from './dashboard/dashboard.component';
import { MyProfileComponent } from './dashboard/my-profile/my-profile.component'
const routes: Routes = [
{ 
    path: 'dashboard', 
    canActivate: [AuthGuard], 
    resolve: {"key": ProfileDetailsResolverService}, 
    children: [
        {
             path: '',
             component: DashboardComponent,
             pathMatch: 'full' // if it won't work try remove/add this line
        },
        {
            path: 'my-profile', 
            component: MyProfileComponent
        }
    ]
}
];

推荐阅读