Sub-Routing (Angular)

Noch in Bearbeitung

Sub-Route anlegen

import ...

const routes: Routes = [
  {
    path: '',
    redirectTo: 'submain',
    pathMatch: 'full'
  },
  {
    path: 'submain',
    component: SubMainComponent,
    children: [
      {
        path: '',
        redirectTo: 'subtarget1',
        pathMatch: 'full'
      },
      {
        path: 'subtarget1',
        component: SubTarget1Component,
        outlet: 'sub'
      },
      {
        path: 'subtarget2',
        component: SubTarget2Component,
        outlet: 'sub'
      }
    ]
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class TestRoutingModule { }

Router-Outlet

<router-outlet name='sub'></router-outlet>

Router-Links

<a *ngFor="let tab of tabs" [routerLink]="['/main/submain', {outlets: {'sub': [tab.target]}}]" routerLinkActive="active">
  <div  class="tab-item">{{tab.label}}</div>
</a>

Probleme

Can't bind to 'routerLink' since it isn't a known property of 'a'.

In jedem Modul muss RouterModule importiert sein:

import { RouterModule } from '@angular/router';

@NgModule({
  imports: [
    CommonModule,
    RouterModule
  ],
  ...
})

Links

https://angular.io/guide/router

https://onehungrymind.com/named-router-outlets-in-angular-2/

Zurück zu Angular