Angular 路由使用整理（一）

天马3798

于 2018-01-20 18:16:58 发布

阅读量7k

点赞数 1

分类专栏： Angular2 文章标签： Angular 路由使用整理

本文链接：https://blog.csdn.net/u011127019/article/details/79115624

版权

Angular2 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

Angular的路由器能让用户从一个视图导航到另一个视图。

Angular2以及以后的版本路由器使用浏览器的history.pushState 进行导航，这样就和多网页应用链接保持一致了，而不是Angular1.x中还用hash(#)风格处理前端路由。

一、基础知识

大多数带路由的应用都要在index.html的<head>标签下先添加一个<base>元素，来告诉路由器该如何合成导航用的URL。

<base href="/">

二、使用先导入模块

在app.module.ts中导入路由模块

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

三、配置路由定义和路由出口

//定义路由配置
const appRoutes: Routes = [
  { path: 'add', component: MenuAddComponent },
  { path: 'detail/:id', component: MenuDetailComponent },
  { path: 'home', component: EmptyComponent ，data:{title:'测试1'}},
  { path: '', redirectTo: '/home', pathMatch: 'full' },  //空目录，重定向处理
  { path: '**', component: EmptyComponent } //通配符，其他路由失败的，会跳转到这个视图
];

每个带路由的Angular应用都有一个Router(路由器)服务的单例对象。当浏览器的URL变化时，路由器会查找对应的Route（路由），并据此决定改显示哪儿个组件。

使用RouterModule.forRoot() 方法来注册路由定义数组。

@NgModule({
  declarations: [
    AppComponent,
    MenuAddComponent,
    MenuDetailComponent,
    EmptyComponent,
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    RouterModule.forRoot(appRoutes)
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

路由定义说明：

1.每个Route都会把一个URL的path映射到一个组件。注意，path不能以斜杠(/)开头。

2.路由的:id是一个路由参数占位符，类似MVC中{id}
3.路由中的data属性，用来存放每个具体忽悠有关的信息。使用resolve守卫来获取动态数据.

4.空路径('')表示应用的默认路径，（**）通配符，最后制定，路由解析也和MVC中安定义顺序先定义先匹配。

路由出口:路由结果内容都显示在这个位置。

<router-outlet></router-outlet>

四、路由链接、路由状态

  <li><a routerLink='/home' routerLinkActive="active">首页</a></li>
  <li><a routerLink='/add' routerLinkActive="active">新增页面</a></li>

超链接的RouterLink指令让路由器以控制这个a元素，固定连接使用字符串routerLink绑定，如果需要加动态的导航，那就把它绑定到一个返回连接参数数组的模板表达式，路由器会把这个数组解析成完成的URL。

RouterLinkActive指令可以帮助用户绑定当前活动路由的样式名称。

路由状态

在导航的每个生命周期完成时，路由器会构建出一个ActivedRoute组成的树，他表示路由的当前状态。我们可以在应用的任何地方用Router服务及其routerState属性来访问当前RouterState值。

路由状态为我们提供了从任意激活路由开始向上或向下遍历路由树的一种方式，以获得关于父、子、兄弟的路由信息。

获取路由参数

  import {ActivatedRoute} from "@angular/router";
   
   export class AboutList {
       id: Object;
       constructor(public route:ActivatedRoute) {
           this.id = {};
       }
       ngOnInit() {
           this.route.params.subscribe(params => {
               this.id = params  // {id: "xxx"}
           });
       }
   }

js跳转路由处理

  import {Router} from "@angular/router";
    
    constructor(public router: Router) {
    // 相当于window.location.href，界面跳转
        router.navigateByUrl('home');
    }

总结一下：

路由器部件	含义
`Router`（路由器）	为激活的URL显示应用组件。管理从一个组件到另一个组件的导航
`RouterModule`（路由器模块）	一个独立的Angular模块，用于提供所需的服务提供商，以及用来在应用视图之间进行导航的指令。
`Routes`（路由数组）	定义了一个路由数组，每一个都会把一个URL路径映射到一个组件。
`Route`（路由）	定义路由器该如何根据URL模式（pattern）来导航到组件。大多数路由都由路径和组件类构成。
`RouterOutlet`（路由出口）	该指令（`<router-outlet>`）用来标记出路由器该在哪里显示视图。
`RouterLink`（路由链接）	该指令用来把一个可点击的HTML元素绑定到路由。点击带有绑定到字符串或链接参数数组的`routerLink`指令的元素就会触发一次导航。
`RouterLinkActive`（活动路由链接）	当HTML元素上或元素内的`routerLink`变为激活或非激活状态时，该指令为这个HTML元素添加或移除CSS类。
`ActivatedRoute`（激活的路由）	为每个路由组件提供提供的一个服务，它包含特定于路由的信息，比如路由参数、静态数据、解析数据、全局查询参数和全局碎片（fragment）。
`RouterState`（路由器状态）	路由器的当前状态包含了一棵由程序中激活的路由构成的树。它包含一些用于遍历路由树的快捷方法。
链接参数数组	这个数组会被路由器解释成一个路由操作指南。我们可以把一个`RouterLink`绑定到该数组，或者把它作为参数传给`Router.navigate`方法。
*路由组件*	一个带有`RouterOutlet`的Angular组件，它根据路由器的导航来显示相应的视图。

Angular CLI ng常用命令整理
 Angular 绑定语法简介

Angular中的模板和表达式简介

http://blog.csdn.net/u010130282/article/details/53613277

天马3798

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
Angular 路由使用整理（一）

Angular的路由器能让用户从一个视图导航到另一个视图。Angular2以及以后的版本路由器使用浏览器的history.pushState 进行导航，这样就和多网页应用链接保持一致了，而不是Angular1.x中还用hash(#)风格处理前端路由。一、基础知识<base href>大多数带路由的应用都要在index.html的标签下先添加一个元素，来告诉路由器该如何合
复制链接

扫一扫

专栏目录