Routing#
npm install @angular/router --save
- router definition
- router content: <router-outlet> (dynamic content)
- ([routerLink]}
- RouterModule.forRoot(appRoutes);
- RouterModule.forChild(appRoutes);
- declarations: [<components-array>,...
app.routing.ts:
import {Routes, RouterModule, RouterStateSnapshot, ActivatedRouteSnapshot} from '@angular/router'; import {DashboardComponent} from './dashboard/dashboard.component'; import {SettingsComponent} from './settings/settings.component'; import {AboutComponent} from './about/about.component'; import {LoginComponent, LoginGuard, UserResolver} from './login/index'; import {NotFoundComponent} from './not-found/not-found.component'; import {tasksRoutes, tasksRoutingComponents, tasksRoutingProviders} from './tasks/tasks.routing'; import {ChatComponent} from './chat-component/chat.component'; import {RESOLVED_TOKEN} from './app.tokens'; export const appRoutes: Routes = [ {path: 'dashboard', component: DashboardComponent, data: {title: 'Startseite'}}, // Dashboard unter /dashboard {path: '', redirectTo: '/dashboard', pathMatch: 'full'}, { path: 'settings', component: SettingsComponent, data: { title: 'Einstellungen' }, resolve: { user: UserResolver, token: RESOLVED_TOKEN } }, {path: 'about', component: AboutComponent, data: {title: 'Über uns'}}, {path: 'login', component: LoginComponent}, {path: 'chat', component: ChatComponent, outlet: 'bottom'}, {path: 'tasks', canActivate: [LoginGuard], children: tasksRoutes}, /** Redirect Konfigurationen **/ {path: '**', component: NotFoundComponent}, // immer als letztes konfigurieren - erste Route die matched wird angesteuert ]; export const appRouting = RouterModule.forRoot(appRoutes); export const routingComponents = [DashboardComponent, SettingsComponent, AboutComponent, LoginComponent, ChatComponent, NotFoundComponent, ...tasksRoutingComponents];
app.module.ts:
import {routingComponents, appRouting, routingProviders} from './app.routing'; @NgModule({ imports: [BrowserModule, FormsModule, ReactiveFormsModule, appRouting], entryComponents: [AppComponent], providers: [ routingProviders, LoginService, Title, {provide: AUTH_ENABLED, useValue: true}, TaskService ], declarations: [AppComponent, routingComponents, ShowErrorComponent, APPLICATION_VALIDATORS], bootstrap: [AppComponent] })
app.component.html:
<a routerLink='/'>Start</a> <a routerLink='/settings'>Settings</a> ... <router-outlet></router-outlet>