Angular4学习笔记之路由简介

简介

路由简介

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

Angular路由

Angular 的 Router（即“路由器”）借鉴了这个模型。
它把浏览器中的 URL 看做一个操作指南， 据此导航到一个由客户端生成的视图，并可以把参数传给支撑视图的相应组件，帮它决定具体该展现哪些内容。 

    我们可以为页面中的链接绑定一个路由，这样，当用户点击链接时，就会导航到应用中相应的视图。
    当用户点击按钮、从下拉框中选取，或响应来自任何地方的事件时，我们也可以在代码控制下进行导航。 
    路由器还在浏览器的历史日志中记录下这些活动，这样浏览器的前进和后退按钮也能照常工作。

一句话总结路由

  链接地址： 127.0.0.1:4200/home,  home 就是我们需要路由到的地址。路由切换就是：切换 home，改为其他值，展示不同的界面。

路由的基础知识

最简单路由的例子

创建路由的工程

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>

启动服务：

匹配不存在的路由

修改 App-routing.module.ts

/* 说明：匹配不存在的路由的顺序需要放置在最后，因为查询路由的顺序是从上至下 */
const routes: Routes = [
  {path:'', component: HomeComponent},
  {path:'product', component: ProductComponent },
  {path:'**', component: HomeComponent }
];

图示：