Angular 4.x 路由快速入门学习
路由是Angular应用程序的核心,它加载与所请求路由相关联的组件,以及获取特定路由的相关数据。这允许我们通过控制不同的路由,获取不同的数据,从而渲染不同的页面。
接下来我们将按照以下目录的内容,介绍Angular的路由。具体目录如下:
目录
- Installingtherouter
- Basehref
- Usingtherouter
- RouterModule.forRoot
- RouterModule.forChild
- Configuringaroute
- Displayingroutes
- Futherconfiguration
- Dynamicroutes
- Childroutes
- Component-lessroutes
- loadChildren
- Routerdirectives
- routerLink
- routerLinkActive
- RouterAPI
Installingtherouter
首先第一件事,我们需要安装AngularRouter。你可以通过运行以下任一操作来执行此操作:
yarnadd@angular/router #OR npmi--save@angular/router
以上命令执行后,将会自动下载@angular/router模块到node_modules文件夹中。
Basehref
我们需要做的最后一件事,是将
这件事操作起来很简单,只需打开项目中的index.html文件,添加相应的
Application
以上配置信息告诉Angular路由,应用程序的根目录是/。
Usingtherouter
要使用路由,我们需要在AppModule模块中,导入RouterModule。具体如下:
import{NgModule}from'@angular/core'; import{BrowserModule}from'@angular/platform-browser'; import{RouterModule}from'@angular/router'; import{AppComponent}from'./app.component'; @NgModule({ imports:[ BrowserModule, RouterModule ], bootstrap:[ AppComponent ], declarations:[ AppComponent ] }) exportclassAppModule{}
此时我们的路由还不能正常工作,因为我们还未配置应用程序路由的相关信息。RouterModule对象为我们提供了两个静态的方法:forRoot()和forChild()来配置路由信息。
RouterModule.forRoot()
RouterModule.forRoot()方法用于在主模块中定义主要的路由信息,通过调用该方法使得我们的主模块可以访问路由模块中定义的所有指令。接下来我们来看一下如何使用forRoot():
//... import{Routes,RouterModule}from'@angular/router'; exportconstROUTES:Routes=[]; @NgModule({ imports:[ BrowserModule, RouterModule.forRoot(ROUTES) ], //... }) exportclassAppModule{}
我们通过使用const定义路由的配置信息,然后把它作为参数调用RouterModule.forRoot()方法,而不是直接使用RouterModule.forRoot([...])这种方式,这样做的好处是方便我们在需要的时候导出ROUTES到其它模块中。
RouterModule.forChild()
RouterModule.forChild()与Router.forRoot()方法类似,但它只能应用在特性模块中。
友情提示:根模块中使用forRoot(),子模块中使用forChild()
这个功能非常强大,因为我们不必在一个地方(我们的主模块)定义所有路由信息。反之,我们可以在特性模块中定义模块特有的路由信息,并在必要的时候将它们导入我们主模块。RouterModule.forChild()的使用方法如下:
import{NgModule}from'@angular/core'; import{CommonModule}from'@angular/common'; import{Routes,RouterModule}from'@angular/router'; exportconstROUTES:Routes=[]; @NgModule({ imports:[ CommonModule, RouterModule.forChild(ROUTES) ], //... }) exportclassChildModule{}
通过以上示例,我们知道在主模块和特性模块中,路由配置对象的类型是一样的,区别只是主模块和特性模块中需调用不同的方法,来配置模块路由。接下来我们来介绍一下如何配置ROUTES对象。
Configuringaroute
我们定义的所有路由都是作为ROUTES数组中的对象。首先,为我们的主页定义一个路由:
import{Routes,RouterModule}from'@angular/router'; import{HomeComponent}from'./home/home.component'; exportconstROUTES:Routes=[ {path:'',component:HomeComponent} ]; @NgModule({ imports:[ BrowserModule, RouterModule.forRoot(ROUTES) ], //... }) exportclassAppModule{}
示例中我们通过path属性定义路由的匹配路径,而component属性用于定义路由匹配时需要加载的组件。
友情提示:我们使用path:''来匹配空的路径,例如:https://yourdomain.com
Displayingroutes
配置完路由信息后,下一步是使用一个名为router-outlet的指令告诉Angular在哪里加载组件。当Angular路由匹配到响应路径,并成功找到需要加载的组件时,它将动态创建对应的组件,并将其作为兄弟元素,插入到router-outlet元素中。
在我们AppComponent组件中,我们可以在任意位置插入router-outlet指令:
import{Component}from'@angular/core'; @Component({ selector:'app-root', template:`Ourapp
我们现在已经建立了应用程序的主路由,我们可以进一步了解路由的其它配置选项。
Furtherconfiguration
到目前为止我们已经介绍的内容只是一个开始,接下来我们来看看其它一些选项和功能。
Dynamicroutes
如果路由始终是静态的,那没有多大的用处。例如path:''是加载我们HomeComponent组件的静态路由。我们将介绍动态路由,基于动态路由我们可以根据不同的路由参数,渲染不同的页面。
例如,如果我们想要在个人资料页面根据不同的用户名显示不同的用户信息,我们可以使用以下方式定义路由:
import{HomeComponent}from'./home/home.component'; import{ProfileComponent}from'./profile/profile.component'; exportconstROUTES:Routes=[ {path:'',component:HomeComponent}, {path:'/profile/:username',component:ProfileComponent} ];
这里的关键点是:,它告诉Angular路由,:username是路由参数,而不是URL中实际的部分。
友情提示:如果没有使用:,它将作为静态路由,仅匹配/profile/username路径
现在我们已经建立一个动态路由,此时最重要的事情就是如何获取路由参数。要访问当前路由的相关信息,我们需要先从@angular/router模块中导入ActivatedRoute,然后在组件类的构造函数中注入该对象,最后通过订阅该对象的params属性,来获取路由参数,具体示例如下:
import{Component,OnInit}from'@angular/core'; import{ActivatedRoute}from'@angular/router'; @Component({ selector:'profile-page', template:`{{username}}
介绍完动态路由,我们来探讨一下如何创建childroutes。
Childroutes
实际上每个路由都支持子路由,假设在我们/settings设置页面下有/settings/profile和/settings/password两个页面,分别表示个人资料页和修改密码页。
我们可能希望我们的/settings页面拥有自己的组件,然后在设置页面组件中显示/settings/profile和/settings/password页面。我们可以这样做:
import{SettingsComponent}from'./settings/settings.component'; import{ProfileSettingsComponent}from'./settings/profile/profile.component'; import{PasswordSettingsComponent}from'./settings/password/password.component'; exportconstROUTES:Routes=[ { path:'settings', component:SettingsComponent, children:[ {path:'profile',component:ProfileSettingsComponent}, {path:'password',component:PasswordSettingsComponent} ] } ]; @NgModule({ imports:[ BrowserModule, RouterModule.forRoot(ROUTES) ], }) exportclassAppModule{}
在这里,我们在setttings路由中定义了两个子路由,它们将继承父路由的路径,因此修改密码页面的路由匹配地址是/settings/password,依此类推。
接下来,我们需要做的最后一件事是在我们的SettingsComponent组件中添加router-outlet指令,因为我们要在设置页面中呈现子路由。如果我们没有在SettingsComponent组件中添加router-outlet指令,尽管/settings/password匹配修改密码页面的路由地址,但修改密码页面将无法正常显示。具体代码如下:
import{Component}from'@angular/core'; @Component({ selector:'settings-page', template:`