Sub-Routing (Angular): Unterschied zwischen den Versionen
Zur Navigation springen
Zur Suche springen
(5 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt) | |||
Zeile 10: | Zeile 10: | ||
{ | { | ||
path: '', | path: '', | ||
redirectTo: ' | redirectTo: 'submain', | ||
pathMatch: 'full' | pathMatch: 'full' | ||
}, | }, | ||
{ | { | ||
path: ' | path: 'submain', | ||
component: | component: SubMainComponent, | ||
children: [ | children: [ | ||
{ | { | ||
Zeile 46: | Zeile 46: | ||
<pre> | <pre> | ||
<router-outlet name='sub'></router-outlet> | |||
</pre> | </pre> | ||
Zeile 52: | Zeile 52: | ||
<pre> | <pre> | ||
<a *ngFor="let tab of tabs" [routerLink]="['/ | <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> | ||
</pre> | </pre> | ||
== Probleme == | |||
=== Can't bind to 'routerLink' since it isn't a known property of 'a'. === | |||
In '''jedem''' Modul muss ''RouterModule'' importiert sein: | |||
<pre> | |||
import { RouterModule } from '@angular/router'; | |||
@NgModule({ | |||
imports: [ | |||
CommonModule, | |||
RouterModule | |||
], | |||
... | |||
}) | |||
</pre> | |||
== Links == | |||
[https://angular.io/guide/router https://angular.io/guide/router] | |||
[https://onehungrymind.com/named-router-outlets-in-angular-2/ https://onehungrymind.com/named-router-outlets-in-angular-2/] | |||
Zurück zu [[Angular#Routing|Angular]] | Zurück zu [[Angular#Routing|Angular]] |
Aktuelle Version vom 30. November 2018, 12:35 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>
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