angular4.0之-----路由

标签：匹配   分配   添加   中标   exports   rmi   family   class   技术分享   

首先需要先了解一个概念(SPA：一组视图状态的集合)，也就是单页面应用，一个页面只加载一次，不再刷新，只改变页面部分内容的应用。

路由为每一个视图分配一个唯一的URL。

在创建的时候 ng new routeDemo --routing即可生成一个带路由的项目。

运行 ng g component code404 添加一个code404组件 

路由的基本知识

在项目中,路由文件通常为app-routing.module.ts

配置

打开路由文件，在routes:Routes对象中定义路由列表，其中，每一个路由至少包含两个参数，即path和component也就是URL和组件的映射关系

注意：这里的path最好不要以/开头,否则会导致路由URL相对关系的混乱，Angular会自动帮你处理和子路由的关系，除非你明确知道你要做什么

app-routing.module.ts源码

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  }，
  // 放在最后，当匹配不到的时候会选择此路由 
 {path:‘**‘,component:Code404Component}
];

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

app.module.ts修改部分

1   imports: [
2     BrowserModule,
3     AppRoutingModule
4   ],

 在Terminal里面输入 ng g component home添加home组件

插座

所谓的插座,也就是在HTML中定义的路由对应的组件插入点

使用<router-outlet></router-outlet>标签定义路由对应组件的插入位置(在该标签下面)

路由链接

使用<a [routerLink]="[‘/product‘]"> 产品列表</a>来定义一个路由导航链接。

注意：这里的路由字符串需要加上/指根路由，后面我们会使用./等来区分根路由和子路由，路由的参数是一个数组而不是字符串，因为后面我们需要给路由传递参数

传递参数

angular4.0之-----路由

标签：匹配   分配   添加   中标   exports   rmi   family   class   技术分享   

原文地址：http://www.cnblogs.com/guanguan-/p/7722157.html