Маршрутизация внутри компонента

Question

У меня есть компонент, который я использую на странице, и у этого компонента есть вкладки, вкладки работают нормально, хотя они не являются компонентами, они просто находятся в компоненте.

Это то, что я 'пытаюсь сделать, иметь новую ссылку при нажатии на вкладку:

entity/someUid <-- Current behaviour

entity/someUid/messages   <-- When clicking on a tab
entity/someUid/languages  <-- When clicking on a tab

Страница:

<app-entity
  (currentTab)="getCurrentTab($event)"
></app-entity>

Модуль страницы:

const routes: Routes = [
  {
    path: '',
    component: EntityPage
  }
];

Компонент страницы:

// It does navigate like the example above but instead my 404 page is showing up
getCurrentTab(tab: string) {
  this.router.navigate(['entity', this.entity.uid, tab]);
}

Сам компонент:

<ul>
  <li (click)="view = 'messages'; currentTab.emit('messages')">Messages</li>
  <li (click)="view = 'languages'; currentTab.emit('languages')">Languages</li>
</ul>

<div *ngIf="view == 'messages'">
  Messages Content
</div>

<div *ngIf="view == 'languages'">
  Languages Content
</div>

@Output() currentTab: EventEmitter<string> = new EventEmitter();

view: string

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

Answer 1

Попробуйте это

https://codecraft.tv/courses/angular/routing/nested-routes/

Дочерние маршруты, добавив еще один выход маршрутизатора в объекте приложения и сделав маршруты, объявленные в его модуле