относительная маршрутизация без '/' добавляет вещи к URL вместо замены части URL

Question

Я новичок в angular и пытаюсь понять процесс маршрутизации с дочерними маршрутами.Как описано здесь (https://angular.io/guide/router#milestone-4-crisis-center-feature), я хочу иметь разные функции приложения в отдельных функциональных модулях с отдельными модулями маршрутизации.

В этих модулях маршрутизации я настроил несколько дочерних маршрутов и у меня есть панель навигации (в функции.component.html) с некоторыми относительными routerLinks (без '/' в первом сегменте, см. https://angular.io/api/router/RouterLink). Однако это не работает должным образом. Вместо переключения между localhost: 4200 / child и localhost: 4200/ grandchild, он пытается перейти от localhost: 4200 / child к localhost: 4200 / child / внук; я хотел бы понять, почему это происходит. С абсолютным routerLink, как '/ child', он работает; но насколько это понятномаршрутизация также должна работать без косой черты, потому что маршрутизатор проверяет дочерние элементы на основе активированного маршрута

, взятого из официального Angular Doc:

Имя первого сегмента может бытьс добавлением /, ./ или ../:

• Если первый сегмент начинается с /, маршрутизатор будетнайдите маршрут в корне приложения.
• Если первый сегмент начинается с ./ или не начинается с косой черты, маршрутизатор вместо этого будет искать дочерние элементы текущего активированного маршрута.
• И если первый сегмент начинается с ../, маршрутизатор поднимется на один уровень вверх.

feature.component.ts (только для NgModule)

@NgModule({
  declarations: [
    FeatureComponent,
    ChildComponent,
    GrandchildComponent
  ],
  imports: [
    CommonModule,
    FeatureRoutingModule
  ]
})

feature.component.html

<div class="border border-primary">
  <h1>feature.component</h1>
  <div>
    <nav class="navbar navbar-expand bg-dark navbar-dark">
      <div class="navbar-nav">
        <a class="nav-item nav-link" routerLink="child">CHILD</a>
        <a class="nav-item nav-link" routerLink="grandchild">GRANDCHILD</a>
      </div>
    </nav>
  </div>
  <router-outlet></router-outlet>
</div>

feature-routing.module.ts (только маршруты)

const routes: Routes = [
  {
    path: '', component: FeatureComponent, children:
      [
        { path: 'child', component: ChildComponent },
        { path: 'grandchild', component: GrandchildComponent }
      ]
  }
];

app.component.html

<h1>app.component</h1>
<router-outlet></router-outlet>

app-module.ts (только для NgModule)

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FeatureModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})

• при первой загрузке я вижу компонент с навигационной панелью.URL говорит: localhost: 4200
• первый клик на 'CHILD' = URL меняется на localhost: 4200 / child -> пока это нормально
• secondнажмите на «GRANDCHILD», он попытается перейти на localhost: 4200 / child / (внучат) , взятый из вывода консоли:

  NavigationError {id: 32, url: "/ child/ (grandchild) ", ошибка: ошибка: невозможно сопоставить ни один маршрут.Сегмент URL: 'child' в ApplyRedirects.push ../ node_modules / @ angu…}

Почему это происходит?как я могу вывести активированный маршрут в консоль, чтобы немного лучше понять все?

Answer 1

первый щелчок на 'CHILD' = URL-адрес изменяется на localhost: 4200 / child -> это> нормально, пока второй клик на 'GRANDCHILD', он пытается перейти на> localhost: 4200 / child /(внук)

Но в этом случае активированный маршрут равен child (после перехода на localhost: 4200 / child), потому что активированный маршрут содержит информацию о маршруте, связанном с компонентом, загруженным в розетку(маршрут child связан с ChildComponent).Указание

routerLink="grandchild"

// Or

routerLink="./grandchild"

означает, что grandchild должен быть добавлен к child (активированный маршрут).Чтобы достичь желаемого, вам нужно указать что-то вроде этого:

// adding / means to go to app root path,
// and FeatureComponent has path: '',
// so it starts from root path
routerLink="/grandchild"

Или:

// adding ../ means go one level up (remove "child")
routerLink="../grandchild"

С абсолютным routerLink типа '/ child' это работает;

На верхнем уровне пути, начинающиеся с / ссылающиеся на корень приложения (из Angular Docs).Таким образом, он идет к корню приложения, которое также работает так, как вы хотите, потому что FeatureComponent имеет путь: '', и не является дочерним элементом другого компонента с некоторым путем, поэтому он начинается с корня.

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

Angular Docs говорит, что маршрутизатор поддерживает синтаксис, похожий на каталогв списке параметров ссылки, чтобы помочь найти название маршрута.Так выглядит, какой путь использовать (относительный или абсолютный) и куда идти.Если используется аналогия с синтаксисом каталога, текущий каталог является активированным маршрутом (child в данном случае после перехода к localhost:4200/child):

routerLink = "grandchild" - (относительный путь) ищет внука в дочернем элементеи перейдите в child / grandchild

routerLink = "./ grandchild" - (относительный путь) такой же, как предыдущий

routerLink = "../ grandchild" - (относительный путь)каталог по сравнению с текущим каталогом

routerLink = "/ grandchild" - (абсолютный путь) ищите внука в корневом каталоге и переходите к / grandchild

Надеюсь, это поможет)