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