angular - 内容在导航上没有改变，但 url 正在改变

Question

我想为 /admin 文件夹中的所有组件使用通用模板，为此我尝试使用父子关系。

我遇到的问题是当我在管理文件夹中并且我尝试导航然后浏览器中的 url 更改但子组件的内容在我刷新屏幕之前不会反映在页面上。

这是我的代码..

管理员路由.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AuthGuard } from '../../../helpers/auth.gaurd';
import {ERole} from '../../../data/schema/ERole';
import { AdminComponent } from './admin.component';
import { HomeComponent } from '../home/home.component';
import { ProjectFolderComponent } from '../project-folder/project-folder.component';
import { ListProjectCategoryComponent } from '../project-folder/projectCategory/list-project-category/list-project-category.component';
import { CreateProjectCategoryComponent } from '../project-folder/projectCategory/create-project-category/create-project-category.component';
import { DetailsProjectCategoryComponent } from '../project-folder/projectCategory/details-project-category/details-project-category.component';
import { CreateFirmContactComponent } from '../firm-contact/create-firm-contact/create-firm-contact.component';

const routes: Routes = [{ 
  path: '',
 //  component: AdminComponent ,
children: [
{ path: 'projectCategory/list', 
component: ListProjectCategoryComponent
},
{ path: 'projectCategory/create', 
component: CreateProjectCategoryComponent
},
{ path: 'projectCategory/details', 
component: DetailsProjectCategoryComponent
},
{ path: 'firm-contact/create', 
component: CreateFirmContactComponent
}]
}];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class AdminRoutingModule { }

在这里我评论了组件： AdminComponent 因为如果我取消注释它，导航按预期工作正常，内容加载导航，但是出现了一个新问题是 AdminComponent 的模板加载了两次，就像这样

这是我的项目结构..

应用路由模块

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { ERole } from './data/schema/ERole';
import { AuthGuard } from './helpers/auth.gaurd';
import { MainComponent } from './modules/general/home/main/main.component';

const routes: Routes = [
  {path:'',component: MainComponent},
 { 
    path: 'admin', 
    loadChildren: () => import('./modules/admin/admin.module').then(m => m.AdminModule),
    canActivate: [AuthGuard],
    data: { roles: [ERole.admin]},
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes, { relativeLinkResolution: 'legacy' })],
  exports: [RouterModule]
})
export class AppRoutingModule { }

标签： angularangular-routingrouter-outlet