Угловые 6 вспомогательных маршрутов

я пытаюсь сделать следующее

образец макета моего приложения

Мне удалось перейти на боковую панель навигации с помощью router-outlet и app.routing-module.ts. Я пробовал вспомогательную маршрутизацию для вкладок внутри компонента Nav4. Но это не удалось. Может ли кто-нибудь помочь мне в этом?

app.routing-module.ts после импорта необходимых компонентов

const routes: Routes = [
    { path: '', component: Nav1Component},
    { path: 'nav2', component: Nav2Component},
    { path: 'nav3', component: Nav3Component},
    {
      path: 'nav4', component: Nav4Component, children: [
          { path: 'tab1', component: Tab1Component, outlet: 'configureoutlet'},
          { path: 'tab2', component: Tab2Component, outlet: 'configureoutlet'}
          { path: 'tab3', component: Tab3Component, outlet: 'configureoutlet'},
          { path: 'tab4', component: Tab4Component, outlet: 'configureoutlet'},
          { path: 'tab5', component: Tab5Component, outlet: 'configureoutlet'},
    ]
 }
];

app.component.html

<router-outlet></router-outlet>

Nav4component.html

<h4>Nav 4 general content</h4>    
<ul>
  <li routerlink="['/nav4', { outlets: { configureoutlet: ['tab1'] }} ]" routerLinkActive='active'>Tab 1</li>
  <li routerlink="['/nav4', { outlets: { configureoutlet: ['tab2'] }} ]" routerLinkActive='active'>Tab 2</li>
  <li routerlink="['/nav4', { outlets: { configureoutlet: ['tab3'] }} ]" routerLinkActive='active'>Tab 3</li>
  <li routerlink="['/nav4', { outlets: { configureoutlet: ['tab4'] }} ]" routerLinkActive='active'>Tab 4</li>
  <li routerlink="['/nav4', { outlets: { configureoutlet: ['tab5'] }} ]" routerLinkActive='active'>Tab 5</li>
</ul>
<router-outlet name='configureoutlet'></router-outlet>

Когда я запускаю приложение, я получаю следующую ошибку:

Ошибка: не удается сопоставить ни один маршрут


person Prabhakaran    schedule 17.12.2018    source источник


Ответы (1)


Вы можете указать относительный путь, примерно так

<li routerlink="['tab1']" routerLinkActive='active'>Tab 1</li>
<li routerlink="['tab2']" routerLinkActive='active'>Tab 2</li>
<li routerlink="['tab3']" routerLinkActive='active'>Tab 3</li>
<li routerlink="['tab4']" routerLinkActive='active'>Tab 4</li>
<li routerlink="['tab5']" routerLinkActive='active'>Tab 5</li>

И розетка роутера будет просто,

<router-outlet></router-outlet>
person Santhosh V    schedule 17.12.2018