Sub-Routing (Angular): Unterschied zwischen den Versionen
Zur Navigation springen
Zur Suche springen
| Zeile 28: | Zeile 28: | ||
}, | }, | ||
{ | { | ||
path: ' | path: 'subtarget2', | ||
component: | component: SubTarget2Component, | ||
outlet: 'sub' | outlet: 'sub' | ||
} | } | ||
| Zeile 41: | Zeile 41: | ||
}) | }) | ||
export class TestRoutingModule { } | export class TestRoutingModule { } | ||
</pre> | |||
== Router-Outlet == | |||
<pre> | |||
</pre> | |||
== Router-Links == | |||
<pre> | |||
<div *ngFor="let tab of tabs" class="tab-item"> | |||
<a [routerLink]="['/search/main', {outlets: {'sub': [tab.target]}}]" routerLinkActive="active">{{tab.label}}</a> | |||
</div> | |||
</pre> | </pre> | ||
Zurück zu [[Angular#Routing|Angular]] | Zurück zu [[Angular#Routing|Angular]] | ||
Version vom 30. November 2018, 12:01 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-Links
<div *ngFor="let tab of tabs" class="tab-item">
<a [routerLink]="['/search/main', {outlets: {'sub': [tab.target]}}]" routerLinkActive="active">{{tab.label}}</a>
</div>
Zurück zu Angular