Angular 通过路由页面导航

因为Angular是单页面应用，不能用传统的文件目录跳转，需要使用路由器。

路由配置

配置路由有两种方式：

1. 在创建项目或初始化项目时，使用--routing参数，例如:

   ng new angular --routing
   项目创建时会自动生成app-routing.module.ts:

   import { NgModule } from '@angular/core';
   import { Routes, RouterModule } from '@angular/router';
   
   const routes: Routes = [
     {
       path: '',
       children: []
     }
   ];
   
   @NgModule({
     imports: [RouterModule.forRoot(routes)],
     exports: [RouterModule],
     providers: []
   })
   export class AppRoutingModule { }
   

   并且app.module.ts自动加上 AppRoutingModule

   入口组件模板 app.component.html自动加上<router-outlet></router-outlet>标签

2. 手工处理上面的步骤

   当URL匹配时，Angular会把相应的组件，插到router-outlet位置。

看下面的例子:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import {ArticleListComponent} from "./article-list/article-list.component";
import {ArticleDetailComponent} from "./article-detail/article-detail.component";
import {ArticleComponent} from "./article/article.component";

const routes: Routes = [
  {
    path: 'article',
    component:ArticleComponent,
    children: [
      {
        path:'list',
        component:ArticleListComponent,
        children:[]
      },
      {
        path:':id',
        component:ArticleDetailComponent
      }
    ]
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
  providers: []
})
export class AppRoutingModule { }

分别配置了/article,/article/list,/article/1234 三个路由,:id会匹配article的id。component指定匹配时需要显示的组件。

需要注意的是children字段，它的组件是在parent里渲染，而不是在根组件里渲染。也就是说，article组件必须有router-outlet标签，/article/list，/article/1234是显示在article组件中的，而不是app组件中

页面跳转

模板中跳转:

<a routerLink="/article">文章</a>
<a routerLink="/article/list" routerLinkActive="active">文章列表</a>

routerLinkActive会根据当前路由状态应用相应的css类，上面的例子中，只有当前页面是/article/list时，才会应用active类

代码中跳转：
在构造方法中注入Router

constructor(private router:Router){}

跳转

this.router.navigate(['article','list']);

navigate方法的参数是一个数组，包含路径或路径中的参数，上面的例子会跳到/article/list