本文详细介绍了Angular路由的使用，包括安装、配置、路由出口、路由器链接、路由器状态、激活的路由、动态路由、子路由等核心概念。通过实例展示了如何定义路由、导航、获取路由参数以及设置子路由，帮助开发者理解并掌握Angular路由的实践操作。
理解
官方定义：在用户使用应用程序时，Angular 的路由器能让用户从一个视图导航到另一个视图。
使用
安装
需要先安装angular router
npm i --save @angular/router
base href
然后我们需要将 <base> 标签添加到我们的 index.html 文件中的<head>标签里。路由需要根据这个来确定应用程序的根目录。
<!doctype html>
<html>
<head>
<base href="/">
<title>Application</title>
</head>
<body>
<app-root></app-root>
</body>
</html>
以上配置信息告诉 Angular 路由，应用程序的根目录是 / 。
导入
路由并不是 Angular 核心库的一部分，而是在它自己的 @angular/router 包中。
要使用路由，我们需要在app.module.ts中，导入 RouterModule 。
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
配置
每个带路由的 Angular 应用都有一个Router（路由器）服务的单例对象。 当浏览器的 URL 变化时，路由器会查找对应的 Route（路由），并据此决定该显示哪个组件。
我们使用RouterModule.forRoot() 方法，在主模块中定义主要的路由信息，并把它的返回值添加到 AppModule 的 imports 数组中。
官方示例：
const appRoutes: Routes = [
{ path: 'crisis-center', component: CrisisListComponent },
{ path: 'hero/:id', component: HeroDetailComponent },
{
path: 'heroes',
component: H
最低0.47元/天 解锁文章
126
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
