angular2系统学习 - 路由与导航(1)基础篇

最新推荐文章于 2024-07-24 07:45:00 发布

ChengYz_

最新推荐文章于 2024-07-24 07:45:00 发布

阅读量2.9k

点赞数 1

分类专栏： angular2 文章标签： angular2

本文链接：https://blog.csdn.net/qq451354/article/details/53966296

版权

angular2 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

angular2系统学习 - 路由与导航(1)基础篇

本篇内容主要学习路由与导航的基础知识。

1.base href

如果app文件夹是应用的根目录，则在index.html的head中加入

<head>
    <base href="/">
    ...
<head>

2.AppModule配置

2.1引用路由

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

2.2路由数组

appRoutes: Routers = [
{path: 'pathA',component: AComponent},
{path: 'pathB/:id', component: BComponent},
{
    path: 'pathC',
    component: CComponent,
    data: {
      proName: 'proValue'
    }
  },
{path: '', redirectTo:'pathA', pachMatch: 'full'},
{path: '**', PageNotFoundComponent}
]

注意：path不能以'/'开头。否则无法解析url

2.3NgModule添加路由

@NgModule([
  imports:[
    ...
    RouterModule.forRoot(appRoutes)
    ],
    ...
])

2.4路由插座

<router-outlet></router-outlet>
!<--此处呈现component-->

2.5路由器链接

<a routerLink="/pathA" RouterLinkActive="cssClassName">Link</a>

2.5.1带令牌的路由器链接

- <a [routerLink]="['/hero',14]" [routerLinkActive]="active"></a>
- <a routerLink="/hero/14" routerLinkActive="active"></a>
- this.router.navigate(['/hero',14]);

小结

路由器接口

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