1. 添加

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>

• path
  • 不能以 / 开头
• component

默认路由：

{ path: '', redirectTo: '/dashboard', pathMatch: 'full' },

{ path: 'detail/:id', component: HeroDetailComponent },

导航链接：

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { Location } from '@angular/common';
@Component({
  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();