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]="[' | <a *ngFor="let tab of tabs" [routerLink]="['/main', {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:20 Uhr
Noch in Bearbeitung
Sub-Route anlegen
import ...
const routes: Routes = [
{
path: '',
redirectTo: 'main',
pathMatch: 'full'
},
{
path: 'main',
component: MainComponent,
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', {outlets: {'sub': [tab.target]}}]" routerLinkActive="active">
<div class="tab-item">{{tab.label}}</div>
</a>
Zurück zu Angular