Предотвращение наследования маршрутизатором розетки компонентов * stati c в функциональном модуле

Question

Я делю свое приложение на несколько функциональных модулей, я использую только розетку маршрутизатора внутри компонента внутри функционального модуля. ) как я могу предотвратить это?

app.component. html

<app-navbar></app-navbar>

<main>

  <router-outlet></router-outlet>

</main>

<app-footer></app-footer>

Patient-List.component. html (внутри функционального модуля)

<router-outlet></router-outlet>

app-routing. module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';


import { HomeComponent } from './components/home/home.component';
import { ContactComponent } from './components/contact/contact.component';
import { DepartmentComponent } from './components/department/department.component';
import { AboutComponent } from './components/about/about.component';
import { LoginComponent } from './components/login/login.component';
import { ErrorComponent } from './components/error/error.component';


const routes: Routes = [
  { path: '', component: HomeComponent , pathMatch: 'full' },
  { path: 'home', component: HomeComponent, pathMatch: 'full' },
  { path: 'contact', component: ContactComponent , pathMatch: 'full' },
  { path: 'department', component: DepartmentComponent, pathMatch: 'full' },
  { path: 'about', component: AboutComponent, pathMatch: 'full' },
  { path: 'login', component: LoginComponent, pathMatch: 'full' },
  {
    path: "patientDashboard",
    loadChildren: () =>
      import("./features/patient/patient.module").then(m => m.PatientModule)
  },
  { path: '**', component: ErrorComponent },
];

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

Patient-Rouing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { PatientListComponent } from './patient-list/patient-list.component';


const routes: Routes = [
  {
    path: "",
    component: PatientListComponent, pathMatch: 'full',
  }
];

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

Answer 1

const routes: Routes = [
    {
        path: '',
        component: DefaultLayoutComponent -> new one,
        children: [
            { path: '', component: HomeComponent , pathMatch: 'full' },
          { path: 'home', component: HomeComponent, pathMatch: 'full' },
          { path: 'contact', component: ContactComponent , pathMatch: 'full' },
          { path: 'department', component: DepartmentComponent, pathMatch: 'full' },
          { path: 'about', component: AboutComponent, pathMatch: 'full' },
          { path: 'login', component: LoginComponent, pathMatch: 'full' },      
        ]
    },
  {
    path: "patientDashboard",
    loadChildren: () =>
      import("./features/patient/patient.module").then(m => m.PatientModule)
  },
  { path: '**', component: ErrorComponent },
];

DefaultLayoutComponent.ts

<app-navbar></app-navbar>

<main>

  <router-outlet></router-outlet>

</main>

<app-footer></app-footer>

Таким образом, ваша терпеливая панель инструментов не будет использовать тот же макет.

Answer 2

Способ решения этой проблемы заключается в том, чтобы иметь иерархию маршрутизации так, чтобы заголовок каждой ветви маршрутизации составлял компонент макета:

const routes: Routes = [
  { path: '', component: HomeLayoutComponent, children: [
    { path: '', component: HomeComponent },
    { path: 'contact', component: ContactComponent }
  ] },

  { path: 'patientDashboard': component: PatientDashboardLayoutComponent, children: [
    { path: '', component: PatientDashboardComponent }
  ] }
];

Тогда каждый компонент макета становится ответственным за построение макета и может затем поместить розетка маршрутизатора, где он хочет.

компонент домашней компоновки

<app-home-navbar></app-home-navbar>
<router-outlet></router-outlet>

компонент компоновки приборной панели пациента

<app-patient-dashboard-navbar></app-patient-dashboard-navbar>
<router-outlet></router-outlet>

This является тривиальным примером, но демонстрирует, как вы можете управлять своим макетом для различных ветвей иерархии маршрутизации.

Стоит отметить, что вы все еще используете роутер-выход в своей главной точке входа.

Answer 3

В Patient-List.comPonent. html (внутри функционального модуля)

<router-outlet  name="patient"></router-outlet>

В Patient-routing.module.ts

const routes: Routes = [
  {
    path: "",
    component: PatientListComponent, pathMatch: 'full',
    outlet: 'patient'
  }
];