angular路由传递参数_Angular route 路由

在Angular中，最好在一个顶级模块中加载和配置路由，它专注于路由功能，然后由根模块AppModule导入它，最后还有初始化并监听浏览器的地址变化。

生成路由

按照惯例，这个模块类的名字叫做AppRoutingModule，并且位于scr/app下的app-routing.module.ts文件中。

ng generate module app-routing --flat --module=app

--flat 把这个文件放进了 src/app 中，而不是单独的目录中。
--module=app 告诉 CLI 把它注册到 AppModule 的 imports 数组中。

// src/app/app-routing.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

@NgModule({
  imports: [
    CommonModule
  ],
  declarations: []
})
export class AppRoutingModule { }

导入相关路由模块

通常不会在路由模块中声明组件，可以删除@NgModule.declarations 并删除对CommonModule的引用。

你将会使用RouterModule 中的 Routes 类来配置路由，所以还需要导入@angular/router

添加一个 @NgModule.exports 数组，其中放上 RouterModule 。 导出 RouterModule 让路由器的相关指令可以在 AppModule 中的组件中使用。

import { NgModule }             from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

@NgModule({
  exports: [ RouterModule ]
})
export class AppRoutingModule {}

添加路由定义

路由定义会告诉路由，当用户点击某个链接或者在浏览器中输入某个URL时，要显示哪个视图

典型的Angular路由有两个属性：

• path：一个用于匹配浏览器地址中 URL 的字符串
• component：当导航到此路由时，路由器应该创建哪个组件

应用场景：当URL为localhost:4200/heroes时，导航到HeroesComponent

// 首先要导入 HeroesComponent ，以便能在 Route中引用
import { HeroesComponent } from './heroes/heroes.component';

// 路由定义一个路由数组，其中某个路由指向这个数组。
const routes: Routes = [
  { 
    path: 'heroes', 
    component: HeroesComponent 
  }
];

初始化路由

RouterModule.forRoot()

把RouterModule添加到@NgModule.imports数组中，并用routes来配置

@NgModule(){
  imports: [RouterModule.forRoot(routes, {initialNavigation: 'enabled'})],
  exports: [RouterModule]
}

添加路由出口 RouterOutlet

打开AppComponent模板

// 在显示区域添加路由出口，router-outlet会告诉路由要在哪里显示路由到的视图
...
<router-outlet></router-outlet>
...

能在AppComponent中使用RouterOutlet，是因为AppModule导入了AppRoutingModule，而AppRoutingModule导出了 RouterModule

添加路由链接 routerLink

不应该只能让用户把URL粘贴到地址栏中来访问，还应该可以通过点击导航来访问视图

<h1>{{title}}</h1>
<nav>
  <a routerLink="/heroes">Heroes</a>
</nav>
<router-outlet></router-outlet>
<app-messages></app-messages>

routerLink 属性的值为 "/heroes"，路由器会用它来匹配出指向 HeroesComponent 的路由。 routerLink 是 RouterLink 指令的选择器，它会把用户的点击转换为路由器的导航操作。 它是 RouterModule 中公开的另一个指令。

添加默认路由

当应用启动时，浏览器的地址栏指向了网站的根路径。 它没有匹配到任何现存路由，因此路由器也不会导航到任何地方。 <router-outlet> 下方是空白的。

要让应用自动导航到这个仪表盘，请把下列路由添加到 AppRoutingModule.Routes 数组中。

const routes: Routes = [
{ 
  path: '', 
  redirectTo: '/dashboard', 
  pathMatch: 'full' 
  },
  { 
    path: 'heroes', 
    component: HeroesComponent 
  }
];

添加详情视图

要导航到id位11的英雄详情，类似于：~/detail/11
首先导入英雄详情组件：

import { HeroDetailComponent }  from './hero-detail/hero-detail.component';

然后把一个参数化路由添加到 AppRoutingModule.routes 数组中，它要匹配指向英雄详情视图的路径。

{ path: 'detail/:id', component: HeroDetailComponent },
// src/app/dashboard/dashboard.component.html

<a *ngFor="let hero of heroes" class="col-1-4"
    routerLink="/detail/{{hero.id}}">
  <div class="module hero">
    <h4>{{hero.name}}</h4>
  </div>
</a>

回退

把一个后退按钮添加到组件模板的底部，并且把它绑定到组件的 goBack() 方法。

<button (click)="goBack()">go back</button>
goBack(): void {
  this.location.back();
}