Я обновляю приложение Angular с версии 10 до версии 11, которое использует routerLink
, указывающий на выход с именем dialog
, для создания модальных диалогов. Текущий компонент (CoreComponent
в примере ниже) должен оставаться видимым при переходе к модальному диалоговому окну. По какой-то причине они перестали работать в версии 11, они всегда перенаправляются на «/». Никаких исключений не создается, и другие основные ссылки работают нормально.
Я создал образец StackBlitz из моей настройки маршрутизации с включенными файлами package.json версий v10 и v11.
Я перепробовал множество предложений из разных блогов и других вопросов, но ни одно из них не помогло мне с маршрутизацией. Версия Angular 11, похоже, реализовала довольно много исправлений, связанных с маршрутизацией и именованными выходами, но я не смог найти ничего конкретного для моего случая в журнале изменений.
Опция relativeLinkResolution: 'legacy'
не помогает.
🤔 А знаете ли вы, что...
Angular Universal позволяет рендерить веб-приложение на сервере для улучшения SEO и производительности.
Я не думаю, что relativeLinkResolution
связано с тем, как указано в этом вопросе: Angular RelativeLinkResolution — различия между устаревшим и исправленным.
Из того, что я прочитал в вашей демонстрации StackBlitz и сделал несколько проб и ошибок:
Проблема в вашем routes
в core-routing.module.ts. Вы используете маршрут '' для перехода на страницу CoreComponent
. Это приводит к тому, что маршрут всегда перенаправляется на «/».
Вы должны использовать pathMatch: 'full'
, чтобы маршрут с '' или '/' перенаправлялся только на страницу CoreComponent
.
Это должно быть так:
const routes: Routes = [
{
component: CoreComponent,
path: '',
pathMatch: 'full'
},
];
Кроме того, вам не нужно импортировать RouterModule
в AppModule
, поскольку это, похоже, дублирует цель в AppRoutingModule
, которая будет импортировать RoutingModule
.
@NgModule({
imports: [
BrowserModule,
//RouterModule,
AppRoutingModule,
SharedModule,
CoreModule,
],
declarations: [AppComponent],
bootstrap: [AppComponent],
})
export class AppModule {}
Обновлено: если вы хотите, чтобы CoreComponent
отображался постоянно:
CoreModule
вместо redirectTo: '/'
в app-routing.module.ts.const routes: Routes = [
{
path: '',
pathMatch: 'full',
loadChildren: () => import('./core/core.module').then((m) => m.CoreModule),
},
...
];
pathMatch: 'full'
для приведенного ниже маршрута в файле core-routing.module.ts.const routes: Routes = [
{
component: CoreComponent,
path: '',
},
];