路由处理
ng generate module app-routing --flat --module=app
app-routing.module.ts
import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; import { FooComponent } from './foo/foo.component' import { BarComponent } from './bar/bar.component' const routes: Routes = [ { path: 'foo', component: FooComponent }, { path: 'bar', component: BarComponent } ] @NgModule({ imports: [ RouterModule.forRoot(routes) ], exports: [ RouterModule ] }) export class AppRoutingModule {}
设置路由出口:
<h1>{{title}}</h1> <router-outlet></router-outlet>
设置导航链接:
<ul> <li> <a routerLink="/foo">Go Foo</a> </li> <li> <a routerLink="/bar">Go Foo</a> </li> </ul>
-
path
-
不能以
/
开头
-
-
component
{ path: '', redirectTo: '/dashboard', pathMatch: 'full' },
{ path: 'detail/:id', component: HeroDetailComponent },
导航链接:
<a *ngFor="let hero of heroes" class="col-1-4" routerLink="/detail/{{hero.id}}">
在组件中解析获取动态路径参数:
import { Component, OnInit } from '@angular/core'; import { ActivatedRoute } from '@angular/router'; import { Location } from '@angular/common'; @Component({ selector: 'app-user', templateUrl: './user.component.html', styleUrls: ['./user.component.css'] }) export class UserComponent implements OnInit { constructor( private route: ActivatedRoute, private location: Location ) { } ngOnInit() { const id = this.route.snapshot.paramMap.get('id') console.log(id) } }
this.location.back();