Angular 4.x 路由配置与使用教程

177 浏览量更新于2024-08-30 收藏 100KB PDF 举报

"Angular 4.x 路由快速入门学习" 在Angular应用程序中，路由扮演着至关重要的角色，它负责加载与用户请求的特定路由相匹配的组件，并且能够根据路由传递数据，实现不同页面的动态显示。本文将深入探讨Angular 4.x中的路由系统，包括安装、配置和使用各种特性。首先，安装Angular Router是开始路由学习的第一步。通过运行`yarn add @angular/router`或`npm i --save @angular/router`命令，可以将必要的模块添加到项目中的`node_modules`目录。在安装完成后，需要设置`base href`。`<base>`标签在`index.html`文件中是必不可少的，它告诉Angular应用的根URL。例如，如果应用托管在`http://example.com/page1`，不设置基础路径，路由可能会混淆应用的基地址。在`<head>`部分添加`<base href="/" rel="external nofollow">`，确保路由知道应用的起始点是`/`。接下来，我们讨论如何使用路由器。Angular提供两个主要的RouterModule方法：`RouterModule.forRoot`和`RouterModule.forChild`。`RouterModule.forRoot`用于应用的主要模块（通常在AppModule中），它配置应用范围内的路由。而`RouterModule.forChild`用于子模块，配置特定模块的路由。配置路由是Angular路由的关键部分。通过调用`RouterModule.forRoot`或`RouterModule.forChild`，我们可以定义一系列路由，每个路由都有一个唯一路径和关联的组件。例如： ```typescript import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; import { HomeComponent } from './home/home.component'; import { AboutComponent } from './about/about.component'; const routes: Routes = [ { path: '', component: HomeComponent }, { path: 'about', component: AboutComponent } ]; @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule] }) export class AppRoutingModule {} ``` 显示路由涉及使用`<router-outlet>`指令，这是路由器插入组件的地方。在主组件模板中添加`<router-outlet></router-outlet>`，将根据当前激活的路由动态地显示相应的组件。进一步的配置可以包括更复杂的路由设置，如动态路由（基于参数的路由）、子路由（嵌套路由）和组件无状态路由（使用`loadChildren`来延迟加载模块）。动态路由允许我们在路径中使用冒号（`:param`）来传递参数，例如`/user/:id`。子路由是在父路由下定义的路由，可以在同一个视图中呈现多个组件。`loadChildren`属性用于懒加载模块，提高应用性能，只有当实际需要时才加载相关模块。路由器指令如`routerLink`和`routerLinkActive`帮助在模板中创建链接和激活状态。`routerLink`用于指定导航的路径，而`routerLinkActive`则添加一个CSS类到元素上，当路由处于激活状态时。最后，路由器API包含许多有用的类和服务，如`Router`服务用于编程式导航，`ActivatedRoute`服务用于获取当前激活路由的信息，以及`NavigationExtras`接口用于附加导航选项。总结来说，Angular 4.x的路由系统提供了强大的导航和组件管理功能，允许开发者构建复杂的应用程序结构，通过灵活的路由配置和指令实现动态内容呈现。理解和熟练掌握这些概念对于开发高效、响应式的Angular应用至关重要。

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

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

同的路由，获取不同的数据，从而渲染不同的页面。

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

Installing the router

Base href

Using the router

RouterModule.forRoot

RouterModule.forChild

Configuring a route

Displaying routes

Futher configuration

Dynamic routes

Child routes

Component-less routes

loadChildren

Router directives

routerLink

routerLinkActive

Router API

Installing the router

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

yarn add @angular/router

# OR

npm i --save @angular/router

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

Base href

我们需要做的最后一件事，是将 <base> 标签添加到我们的 index.html 文件中。路由需要根据这个来确定应用程序的根目录。例

如，当我们转到 http://example.com/page1 时，如果我们没有定义应用程序的基础路径，路由将无法知道我们的应用的托管地址是

http://example.com 还是 http://example.com/page1 。

这件事操作起来很简单，只需打开项目中的 index.html 文件，添加相应的 <base> 标签，具体如下：

<!doctype html>

<html>

<head>

<title>Application</title>

</head>

<body>

<app-root></app-root>

</body>

</html>

以上配置信息告诉 Angular 路由，应用程序的根目录是 / 。

Using the router

要使用路由，我们需要在 AppModule 模块中，导入 RouterModule 。具体如下：

import { NgModule } from '@angular/core';

import { BrowserModule } from '@angular/platform-browser';

下载后可阅读完整内容，剩余7页未读，立即下载

weixin_38698539

粉丝: 7
资源: 948

Angular 4.x 路由配置与使用教程

Angular 4.x 路由快速入门与实践指南

Vue.js 2.x版本快速入门与实例应用教程

"JHipster全栈开发v7.x：快速入门、15分钟学习、2023最新版本

详解angular2.x创建项目入门指令

angular5.x中文手册

angular-typescript:使用Angular 1.x和Typescript，Gulp和Bower的示例应用程序

AngularJS1.x快速入门

AngularJS1.X快速入门

angular-es6-webpack:Angular.js 1.X ES6 Webpack种子

Angular入门教程1

最新资源