Sub-Routing (Angular): Unterschied zwischen den Versionen
Zur Navigation springen
Zur Suche springen
Zeile 52: | Zeile 52: | ||
<pre> | <pre> | ||
<a *ngFor="let tab of tabs" [routerLink]="['/main', {outlets: {'sub': [tab.target]}}]" routerLinkActive="active"> | <a *ngFor="let tab of tabs" [routerLink]="['/main/submain', {outlets: {'sub': [tab.target]}}]" routerLinkActive="active"> | ||
<div class="tab-item">{{tab.label}}</div> | <div class="tab-item">{{tab.label}}</div> | ||
</a> | </a> |
Version vom 30. November 2018, 12:28 Uhr
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>
Zurück zu Angular