Angular 4.x 路由快速入门学习

2024-02-24 12:41:03 51

路由是Angular应用程序的核心，它加载与所请求路由相关联的组件，以及获取特定路由的相关数据。这允许我们通过控制不同的路由，获取不同的数据，从而渲染不同的页面。

接下来我们将按照以下目录的内容，介绍Angular的路由。具体目录如下：

Installingtherouter
1. Basehref
Usingtherouter
1. RouterModule.forRoot
2. RouterModule.forChild
Configuringaroute
Displayingroutes
Futherconfiguration
1. Dynamicroutes
2. Childroutes
3. Component-lessroutes
4. loadChildren
Routerdirectives
1. routerLink
2. routerLinkActive
RouterAPI

Installingtherouter

首先第一件事，我们需要安装AngularRouter。你可以通过运行以下任一操作来执行此操作：

yarnadd@angular/router
#OR
npmi--save@angular/router

以上命令执行后，将会自动下载@angular/router模块到node_modules文件夹中。

Basehref

我们需要做的最后一件事，是将标签添加到我们的index.html文件中。路由需要根据这个来确定应用程序的根目录。例如，当我们转到http://example.com/page1时，如果我们没有定义应用程序的基础路径，路由将无法知道我们的应用的托管地址是http://example.com还是http://example.com/page1。

这件事操作起来很简单，只需打开项目中的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

` }) exportclassAppComponent{}

我们现在已经建立了应用程序的主路由，我们可以进一步了解路由的其它配置选项。

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}}

` }) exportclassSettingsComponentimplementsOnInit{ username:string; constructor(privateroute:ActivatedRoute){} ngOnInit(){ this.route.params.subscribe((params)=>this.username=params.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:`

另一个很有用的路由功能是component-less路由。使用component-less路由允许我们将路由组合在一起，并让它们共享路由配置信息和outlet。

例如，我们可以定义setttings路由而不需要使用SettingsComponent组件：

此时，/settings/profile和/settings/password路由定义的内容，将显示在AppComponent组件的router-outlet元素中。

我们也可以告诉路由从另一个模块中获取子路由。这将我们谈论的两个想法联系在一起-我们可以指定另一个模块中定义的子路由，以及通过将这些子路由设置到特定的路径下，来充分利用component-less路由的功能。

让我们创建一个SettingsModule模块，用来保存所有setttings相关的路由信息：

需要注意的是，在SettingsModule模块中我们使用forChild()方法，因为SettingsModule不是我们应用的主模块。

另一个主要的区别是我们将SettingsModule模块的主路径设置为空路径('')。因为如果我们路径设置为/settings，它将匹配/settings/settings，很明显这不是我们想要的结果。通过指定一个空的路径，它就会匹配/settings路径，这就是我们想要的结果。

那么/settings路由信息，需要在哪里配置？答案是在AppModule中。这时我们就需要用到loadChildren属性，具体如下：

需要注意的是，我们没有将SettingsModule导入到我们的AppModule中，而是通过loadChildren属性，告诉Angular路由依据loadChildren属性配置的路径去加载SettingsModule模块。这就是模块懒加载功能的具体应用，当用户访问/settings/**路径的时候，才会加载对应的SettingsModule模块，这减少了应用启动时加载资源的大小。

另外我们传递一个字符串作为loadChildren的属性值，该字符串由三部分组成：

了解完路由的一些高级选项和功能，接下来我们来介绍路由指令。

除了router-outlet指令，路由模块中还提供了一些其它指令。让我们来看看它们如何与我们之前介绍的内容结合使用。

为了让我们链接到已设置的路由，我们需要使用routerLink指令，具体示例如下：

当我们点击以上的任意链接时，页面不会被重新加载。反之，我们的路径将在URL地址栏中显示，随后进行后续视图更新，以匹配routerLink中设置的值。

友情提示：我们也可以将routerLink的属性值，改成数组形式，以便我们传递特定的路由信息

如果我们想要链接到动态的路由地址，且该地址有一个username的路由变量，则我们可以按照以下方式配置routerLink对应的属性值：

在实际开发中，我们需要让用户知道哪个路由处于激活状态，通常情况下我们通过向激活的链接添加一个class来实现该功能。为了解决上述问题，Angular路由模块为我们提供了routerLinkActive指令，该指令的使用示例如下：

通过使用routerLinkActive指令，当a元素对应的路由处于激活状态时，active类将会自动添加到a元素上。

我们可以通过路由还提供的API实现与routerLink相同的功能。要使用RouterAPI，我们需要在组件类中注入Router对象，具体如下：

Angular 4.x 路由快速入门学习

Ourapp

{{username}}

Ourapp

Ourapp

Users

随机推荐

Angular 4.x 路由快速入门学习

Ourapp

{{username}}

Ourapp

Ourapp

Users

热门推荐

随机推荐