#angular #web #angular-router #angular-routerlink
Вопрос:
У меня есть главный маршрутизатор-розетка в app.component.html чтобы загрузить главную страницу (макет). Я создал отдельный модуль макета, маршрутизацию и компонент для этой главной страницы, цель состоит в том, чтобы этот макет можно было перепроектировать в любой момент:
The layout.component.html есть ли у этого:
<div class="layout__container">
<div class="layout__container__sidebar">
<app-nav-menu></app-nav-menu>
</div>
<div class="layout__container__content">
<div class="layout__container__content-header">
<div class="header-brand">
<span>My App</span>
</div>
</div>
<div class="layout__container__content-body">
<router-outlet></router-outlet>
</div>
</div>
</div>
Компонент app-nav-меню предоставляет опции пункта меню со ссылками на маршруты и путями для загрузки компонентов (содержимого) в правую часть макета (розетка маршрутизатора), однако при нажатии любой опции компонент загружает всю страницу, так как использует основную розетку маршрутизатора из app.component.html.
Это приложение.маршрутизация.модуль.ts:
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { LayoutComponent } from '@modules/layout/layout.component';
import { CanActivateIdentityGuard } from './guards/can-activate-identity.guard';
/**
* Handle the global routing at module level.
* Each module handle its own routing for components.
*/
const routes: Routes = [
{
path: 'identity',
loadChildren: () => import('./modules/identity/identity.module').then(m => m.IdentityModule)
},
{
path: '',
// If root path is specified, check whether user is authenticated through this guard, enabling the module indicated by loadchildren.
canActivate: [ CanActivateIdentityGuard ],
loadChildren: () => import('./modules/layout/layout.module').then(m => m.LayoutModule)
},
{
path: '**', // Route doesn't exist, will route for a 404 page if redirecting is not set
redirectTo: '/home'
}
];
@NgModule({
// forRoot: register the top-level routes that should be imported only once by the root module of the application.
// This method will return the routing module with providers declared if any.
// forChild: register nested routes in a lazy-loaded module
imports: [RouterModule.forRoot(routes, { relativeLinkResolution: 'legacy' })],
exports: [RouterModule]
})
export class AppRoutingModule { }
This is the layout.routing.module.ts:
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { LayoutComponent } from './layout.component';
import { HomeComponent } from '@modules/home/home.component';
/**
* Handle the Navigation Menu routing for the application.
* The main skeleton of the app is the Layout Component which loads NavMenu and main home components.
* The home page is Home Component.
*/
const routes: Routes = [
{
path: '', component: LayoutComponent,
children: [
{ path: 'home', component: HomeComponent }
]
}
];
@NgModule({
declarations: [],
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class LayoutRoutingModule { }
и… макет.модуль.ts:
import { NgModule } from '@angular/core';
import { LayoutRoutingModule } from './layout.routing.module';
import { SharedModule } from '../shared/shared.module';
import { CommonModule } from '@angular/common';
import { ToolsModule } from '../tools/tools.module';
import { TimerSessionService } from '@services/timer-session.service';
import { LayoutComponent } from './layout.component';
import { HomeComponent } from '@modules/home/home.component';
import { NavMenuComponent } from 'app/components/nav-menu/nav-menu.component';
/**
* Application Modules and Components are loaded by SharedModule.
*/
@NgModule({
declarations: [LayoutComponent, NavMenuComponent, HomeComponent],
imports: [
CommonModule,
LayoutRoutingModule,
SharedModule,
ToolsModule
],
providers: [
TimerSessionService
],
exports: [
]
})
export class LayoutModule { }
Комментарии:
1. Не могли бы вы поделиться своими модулями маршрутизации? Или создайте минимальный воспроизводимый пример на чем-то вроде stackblitz?
2. Я отредактировал вопрос, чтобы добавить необходимый код.
3. У меня возникли проблемы с воспроизведением проблемы. В целом ваш код выглядит нормально. Не могли бы вы попробовать поиграть с этим stackblitz.com/edit/… и посмотрите, сможете ли вы воспроизвести это? Если у вас есть родитель
router-outlet
и ребенокrouter-outlet
, родитель изменится только при изменении родительского маршрута. Поэтому, возможно, у вас есть компонент, загруженный в обоих местах, в результате чего он загружается в родительскую, а не дочернюю розетку маршрутизатора или что-то в этом роде.4. Akirus, в некотором смысле вы были правы, некоторые компоненты были загружены в модуль, на который была ссылка в основном модуле маршрутизатора, поэтому он был причиной перенаправления в родительской розетке маршрутизатора, ссылка, которую вы предоставили, содержит пример этого.
5. Рад, что это помогло 🙂