Угловая розетка маршрутизатора 12, отображающая компонент в приложении.компонентная розетка маршрутизатора, а не в собственной розетке маршрутизатора модуля

#routes #angular-module #angular12 #router-outlet

Вопрос:

У меня есть одна главная страница модуля с тремя компонентами: навигационная панель, нижний колонтитул, главная страница. Я хочу показать страницу главной страницы с фиксированной навигационной панелью и нижним колонтитулом и хочу использовать розетку маршрутизатора для отображения компонента home и других компонентов на главной странице. Но когда я перехожу к «/home», он показывает компонент home в розетке маршрутизатора app.component. мое приложение-routing.module.ts выглядит так:-

 import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router';  const routes: Routes = [  {  path: '',  loadChildren: () =gt; import('./auth/auth.module').then((m) =gt; m.AuthModule),  },  {  path: 'dashboard',  loadChildren: () =gt;  import('./masterpage/masterpage.module').then((m) =gt; m.MasterpageModule),  }, ];  @NgModule({  imports: [RouterModule.forRoot(routes)],  exports: [RouterModule], }) export class AppRoutingModule {}  

masterpage.component.html похоже на:-

 lt;app-navbargt;lt;/app-navbargt;  lt;router-outletgt;lt;/router-outletgt; lt;app-footergt;lt;/app-footergt;  

masterpage-routing.module.ts выглядит так:-

 import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; import { HomeComponent } from './home/home.component'; import { MasterpageComponent } from './masterpage.component';  const routes: Routes = [  { path: '', component: HomeComponent }, ];  @NgModule({  imports: [RouterModule.forChild(routes)],  exports: [RouterModule], }) export class MasterpageRoutingModule {}  

когда я перехожу на локальный хост:4200/панель мониторинга, она показывает только

надомные работы!

Но я хочу

navbar-работает!
надомные работы!
нижний колонтитул-работает