Question

在仪表板组件内部，我的个人资料组件位于其中。当我进入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>

Answer 1

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

路由

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
        }
    ]
}
];

Answer 2

当路由器出口不是唯一的行时，在配置子路由并对它们进行导航时，总是会呈现其他内容。

当您想分开时，可以配置类似这样的路由：

const routes: Routes = [
  { path: 'dashboard', component: DashboardComponent, canActivate: [AuthGuard], resolve: {"key": ProfileDetailsResolverService}, 
    children: [
      {path: 'index', component: DashboardIndexComponent },
      {path: 'my-profile', component: MyProfileComponent },
      {path: '**', redirectTo: 'index' },
  ]}
];

，然后从DashboardComponent中删除另一个html，使其仅是路由组件。

子路线在其下方显示父级的html组件

2 个答案: