ng 路由

基本用法 添加 AppRoutingModule

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
    }
    { path: '**', component:SwiperComponent},
    { path: '', redirectTo: '/dashboard', pathMatch: 'full' },
]
@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>

导航链接 routerLink

路由对象

• path
  • 不能以 / 开头
• component

默认路由：

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

动态路由匹配

动态路径配置：

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

导航链接：

<a *ngFor="let hero of heroes"  [routerLinkActive]="['active']" 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')
      this.route.params.subscribe(item => {
        this.id =  item.id;
         console.log(item.id)
        this.getUser();
     });

    }
}

路由导航

后退：

this.location.back();

• 导航链接 routerLink
• 路由对象
• 动态路由匹配
• 路由导航