Блог

Главная - Вопросы по программированию - Как отобразить маршрут верхнего уровня в Angular named outlet

Как отобразить маршрут верхнего уровня в Angular named outlet

#angular #angular-ui-router

Вопрос:

Тривиальная программа ниже с Angular 12:

  • localhost: 4200 / a работает нормально.
  • localhost:4200 / b выдает мне страшную невозможность сопоставления каких-либо маршрутов. Сегмент URL: ‘b’.
 import { Component, NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule, Routes } from '@angular/router';

@Component({
  selector: 'app-root',
  template: `
    <ng-container>
      <router-outlet></router-outlet>
      <hr/>
      <router-outlet name="named"></router-outlet>  
    </ng-container>
  `
})
export class AppComponent {}
 
 @Component({
  selector: 'a',
  template: 'a here',
})
export class AComponent {}
 
 @Component({
  selector: 'b',
  template: 'b here',
})
export class BComponent {}
 
 const routes: Routes = [
  {
    component: AComponent,
    path: 'a'
  },
  {
    component: BComponent,
    path: 'b',
    outlet: 'named'
  },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {}
 
 @NgModule({
  declarations: [AppComponent, AComponent, BComponent],
  imports: [BrowserModule, AppRoutingModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

В худшем случае я могу переместить маршрут «b» на один уровень ниже (это тоже не сработало), но я бы предпочел оставить b на верхнем уровне.

Комментарии:

1. Вы импортировали BComponent в модуль маршрутизации?

Ответ №1:

Добро пожаловать в Stackoverflow @jay :).

Вы можете проверить здесь больше информации https://angular.io /

при доступе к маршруту B вам необходимо получить доступ с именем маршрутизатора в качестве его именованного маршрута. вы можете использовать что-то вроде localhost:4200/a(named:b)

Метки: