Angular2学习笔记之 Router（路由）

简介

浏览器具有我们熟悉的导航模式：
    1. 在地址栏输入URL，浏览器就会导航到相应的页面。
    2. 在页面中点击链接，浏览器就会导航到一个新页面。
    3. 点击浏览器的前进和后退按钮，浏览器就会在你的浏览历史中向前或向后导航。

Angular 的 Router（即“路由器”）借鉴了这个模型。
它把浏览器中的URL看做一个操作指南， 据此导航到一个由客户端生成的视图，并可以把参数传给支撑视图的相应组件，帮它决定具体该展现哪些内容。 
我们可以为页面中的链接绑定一个路由，这样，当用户点击链接时，就会导航到应用中相应的视图。 
当用户点击按钮、从下拉框中选取，或响应来自任何地方的事件时，我们也可以在代码控制下进行导航。 
路由器还在浏览器的历史日志中记录下这些活动，这样浏览器的前进和后退按钮也能照常工作。

路由的基础知识

路由的例子

创建路由的工程

1.新建一个带有路由配置的工程
  ng new router –routing

2.创建一个 home 的组件
ng g component product

项目工程结构预览

通过标签路由

1.修改 App-routing.module.ts

说明：
每个Route都会把一个URL的path映射到一个组件。注意，path不能以斜杠（/）开头。 
路由器会为解析和构建最终的URL，这样当我们在应用的多个视图之间导航时，可以任意使用相对路径和绝对路径。

/* 增加路由配置 */
import { NgModule } from '@angular/core';
import { Routes,RouterModule } from '@angular/router';
import {HomeComponent} from "./home/home.component";
import {ProductComponent} from "./product/product.component";

const routes: Routes = [
  {path:'',component: HomeComponent},{path:'product',component: ProductComponent }
];

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

2.修改 App.component.html

说明：
<router-outlet></router-outlet> 这个标签为路由的出口。
即：在界面上面需要显示路由内容的时候，会在寻找该标签，并在该标签中显示路由的内容。

/* 在界面HTML dom元素中配置 */
<h1>
  {{title}}
</h1>

<a href="" [routerLink]="['/']">主页</a>
<a href="" [routerLink]="['/product']">商品详细</a>

<router-outlet></router-outlet>

启动服务：

通过 Router 类实现跳转

目的：
通过点击按钮事件，来实现界面的路由跳转。

修改 app.component.ts

import { Component } from '@angular/core';
import {Router} from "@angular/router";

@Component({
  selector: 'app-root',templateUrl: './app.component.html',styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app works!';

  //依赖注入 Router 服务
  constructor(private router : Router ){

  }

  /* 在当前的根组件中加入路由的方法 */
  toProductDetails(){
    this.router.navigate(['/product']);   //传入的值是一个数组
  }
}

修改 app.component.html

<!-- 增加 dom 元素  -->
<input type="button" value="商品详情" (click)="toProductDetails()" />

完整的代码：

<h1>
  Welcome to {{ title }}!
</h1>

<a href="" [routerLink]="['']">主页</a>
<a href="" [routerLink]="['/product']">商品详细</a>

<input type="button" value="商品详情" (click)="toProductDetails()" />
<router-outlet></router-outlet>

启动服务：

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!