Angular 常见路由任务

2024 年 08 月 29 日 | 阅读 9 分钟

该命令使用 Angular CLI 生成基本的 Angular 应用程序，其中包含一个名为 AppRoutingModule 的应用程序路由模块。NgModule 用于配置你的路由器。在下面的示例中，应用程序名称是 routing-app。

生成新应用程序时，CLI 会提示选择 CSS 或 CSS 预处理器。

为路由添加组件

一个应用程序需要两个组件才能相互导航，以便使用 Angular 路由器。要使用 CLI 创建组件，请输入命令行，其中第一个是你的 Component 名称

如果你写 First-Component，你的 Component 将是 FirstComponent。

本指南适用于 CLI 生成的 Angular 应用程序。如果你是手动操作，请确保你的 index.html 文件在 <head> 中包含 <base href="/">。

导入新组件

要使用新组件，请在文件顶部导入到 AppRoutingModule，如下所示

AppRoutingModule (excerpt)
content_copyimport { FirstComponent } from './first/first.component';
import { SecondComponent } from './second/second.component';

构建路由有三个基本构建块

在 AppModule 中导入 AppRoutingModule 并将其添加到 imports 数组中。

如果你是手动创建应用程序或处理现有的非 CLI 应用程序，请验证配置是否正确。以下是使用 --routing 标志的 CLI 的默认 AppModule。

1: 默认 CLI AppModule（通过路由）

content_copyimport { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule // CLI adds AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

将 router module 导入你的路由模块。

Angular CLI 会自动完成此步骤。CLI 还会为你的路由设置路由数组，并为 @NgModule () 配置 import 和 export 数组。

2: CLI 应用程序路由模块

content_copyimport { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router'; // CLI imports router

const routes: Routes = []; // sets up routes where you define your routes

// configures NgModule imports and exports
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

3: 在你的路由数组中定义路由。

数组中的每个路由都是一个具有两个属性的 JavaScript 对象。第一个 path 定义 URL 路径。第二个属性 Component 定义 Angular 用于相对路径的 Component。

AppRoutingModule (excerpt)
content_copyconst route:route = [
   {path: 'first-component', component: firstComponent},
   {path: 'second-component', component: second-component},
];

将路由添加到你的应用程序。

将你想添加到路由中的锚标记分配给 RouterLink 属性。当用户单击每个链接时，设置 Component 上的属性值以显示。更新你的 Component 模板以包含 <router-outlet>。 该元素通知 Angular 使用所选路由的 Component 更新应用程序视图。

带有 RouterLink 和 router-outlet 的模板

content_copy<h1>Angular Router App</h1>
<!-- This nav gives the links to click, which tells the router to use (defined in the routes constant in  AppRoutingModule) -->
<nav>
  <ul>
    <li><a routerLink="/first-component" routerLinkActive="active">First Component</a></li>
    <li><a routerLink="/second-component" routerLinkActive="active">Second Component</a></li>
  </ul>
</nav>
<!-- The routed views render in the <router-outlet>-->
<router-outlet></router-outlet>

路由顺序

路由器很重要，因为路由器在匹配路由时使用“首次匹配获胜”策略，因此更具体的路由放置在不太具体的路由之上。你可以使用路由将信息类型传递给你的应用程序组件。

将 ActivatedRoute 和 ParamMap 导入到你的 Component。

导入语句添加了 Component 所需的几个重要元素。

路由器

ActivatedRoute

通过将其添加到应用程序的构造函数中来注入 ActivatedRoute 的实例

content_copyconstructor(
  private route: ActivatedRoute,
) {}

ngOnInit() 方法用于访问 ActivatedRoute 并跟踪 id 参数

content_copyngOnInit() {
  this.route.queryParams.subscribe(params => {
    this.name = params['name'];
  });
}

注意：示例使用了一个变量名，并根据 name 参数为其赋值。

设置通配符路由

一个功能正常的应用程序应该能够处理用户尝试导航到应用程序中不存在的部分的情况。要将此功能添加到应用程序，你需要设置一个通配符路由。当请求的 URL 与路由路径不匹配时，angular 路由器会选择此路由。

AppRoutingModule (excerpt)
content_copy { path: '**', component: 
}

两个星号（**）表示此路由的定义是通配符路由。常见选项包括特定于应用程序的 PageNotFoundComponent，你可以定义它向用户显示404 页面，或者将他们重定向到你的应用程序的主 Component。

显示 404 页面

要显示404 页面，请设置一个通配符路由，并将 Component 属性设置为你想要用于404 页面的 Component

AppRoutingModule (excerpt)
content_copyconst routes: Routes = [
  { path: 'first-component', component: FirstComponent },
  { path: 'second-component', component: SecondComponent },
  { path: '**', component: PageNotFoundComponent },  // Wildcard route 
];

最后一个 path 为 ** 的路由是通配符路由。如果请求的 URL 与列表中的任何先前路径都不匹配，路由器就会选择此路由，并将用户发送到 PageNotFound Component。

设置重定向

它配置了一个具有你想要重定向的 path 的路由。

AppRoutingModule (excerpt)
content_copyconst routes: Routes = [
  { path: 'first-component', component: FirstComponent },
  { path: 'second-component', component: SecondComponent },
  { path: '',   redirectTo: '/first-component', pathMatch: 'full' },
  { path: '**', component: PageNotFoundComponent }, 
];

在示例中，第三个路由是重定向，路由器默认指向 first-component 路由。

嵌套路由

随着应用程序变得更加复杂，你可能会相对于父组件以外的组件进行路由。\在这里，AppComponent 除了 First Component 之外，还有自己的 <nav> 和另一个 <router-outlet>。

content_copy<h2>First Component</h2>

<nav>
  <ul>
    <li><a routerLink="child-a">Child A</a></li>
    <li><a routerLink="child-b">Child B</a></li>
  </ul>
</nav>

<router-outlet></router-outlet>

子路由是另一个路由，它需要 path 和 component。一个区别是，你将子路由保留在父路由的 children 数组中。

AppRoutingModule (excerpt)
content_copyconst routes: Routes = [
  {
    path: 'first-component',
    component: FirstComponent, // It is the component with the <router-outlet> in the template
    children: [
      {
        path: 'child-a', // child route path
        component: ChildAComponent, // child route component that the router renders
      },
      {
        path: 'child-b',
        component: ChildBComponent,
      },
    ],
  },
];

使用相对路径

通配符路由放在最后，因为它匹配每个 URL，并且只有当没有路由首先匹配时，路由器才会拾取它。

获取路由信息

你希望 Component 检索杂货项的ID，以便向用户显示正确的信息。

你可以使用路由将信息类型传递给应用程序组件。

content_copy<h2>First Component</h2>

<nav>
  <ul>
    <li><a routerLink="../second-component">Relative Route to second component</a></li>
  </ul>
</nav>
<router-outlet></router-outlet>

你可以使用 ./ 来指定当前级别。

指定相对路由

在组件类中使用 Navigation Additional relative 属性来指定相对路由，从 @angular/router 导入 navigation extras。

包含项目链接参数数组设置一个具有相应属性的对象到活动根。

RelativeTo

content_copygoToItems() {
  this.router.navigate(['items'], { relativeTo: this.route });
}

goToItems() 方法解释目标 URL 相对于活动路由，并导航到 item 路由。

访问查询参数

你的应用程序的功能需要访问根的一部分，例如查询参数或片段。英雄之旅应用程序使用列表视图。

Component 导入语句

content_copyimport { ActivatedRoute } from '@angular/router';
import { Observable } from 'rxjs';
import { switchMap } from 'rxjs/operators';

接下来，注入 activated route 服务

Component (excerpt)
content_copyconstructor(private route: ActivatedRoute) {}

将类配置为具有一个可观察对象 hero$，selected 用于保存英雄的 id 号和 heroes。在 ngOnInit() 中，添加以下代码来获取选定的英雄 id。代码片段假设你有一个英雄列表、一个英雄服务、一个获取英雄的函数，以及用于渲染你的列表和描述的 HTML，如 英雄之旅 示例所示。

Component 1

content_copyheroes$: Observable;
selectedId: number;
heroes = HEROES;

ngOnInit() {
  this.heroes$ = this.route.paramMap.pipe(
    switchMap(params => {
      this.selectedId = Number(params.get('id'));
      return this.service.getHeroes();
    })
  );
}

在你想导航到的 component 中导入以下成员。

Component 2

content_copyimport { Router, ActivatedRoute, ParamMap } from '@angular/router';
import { Observable } from 'rxjs';

在 component 类构造函数中注入 ActivatedRoute。

content_copyhero$: Observable;

  constructor(
    private route: ActivatedRoute,
    private router: Router  ) {}

  ngOnInit() {
    const heroId = this.route.snapshot.paramMap.get('id');
    this.hero$ = this.service.getHero(heroId);
  }

  gotoItems(hero: Hero) {
    const heroId = hero ? hero.id : null;
    
this.router.navigate(['/heroes', { id: heroId }]);
  }

延迟加载

你可以在应用程序启动时惰性加载模块，而不是在需要时加载所有模块。Angular 只在应用程序启动时加载模块。

防止未经授权的访问

使用 Root Guard 来防止用户在没有授权的情况下导航到应用程序的某些部分。Angular 中提供了以下根守卫

CanActivate
CanActivateChild
CanDeactivate
Resolve
CanLoad

为你的 guard 创建一个服务

下面的示例使用 enabled 来保护路由。

Component (excerpt)
content_copyexport class YourGuard implements CanActivate {
  canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): boolean {
      // your  logic goes here
  }
}

在你的路由模块中，在路由配置中使用以下属性。

Routing module (excerpt)
content_copy{
  path: '/your-path',
  component: YourComponent,
  canActivate: [YourGuard],
}

链接参数数组

链接参数数组包含以下用于路由器导航的内容

目标 Component 路由的 path。
包含在路由 URL 中的必需和可选路由参数。

你可以将 RouterLink 指令绑定到一个数组

src/app/app.component.ts (h-anchor)
content_copy<a [routerLink]="['/heroes']">hero</a>

下面的示例是一个两元素数组，用于指定路由参数

src/app/heroes/hero-list/hero-list.component.html (nav-to-detail)
content_copy<a [routerLink]="['/hero', hero.id]">
   <span class="badge">{{ hero.id }}</span>{{ hero.name }}
</a>

你可以为对象提供可选的路由参数，例如 {foo: 'foo' }

src/app/app.component.ts (cc-query-params)
content_copy<a [routerLink]="['/crisis-center', { foo: 'foo' }]">crisis center</a>

这些示例涵盖了具有单层路由的应用程序的需求。但是，使用子路由器，你可以创建新的链接数组可能性。

下面极简的 RouterLink 示例为 crisis center 创建了一个指定的默认子路由。

src/app/app.component.ts (cc-anchor-w-default)
content_copy<a [routerLink]="['/crisis-center']">crisis center</a>

数组中的第一项标识原始路由 (/crisis-center)。

这个基本路由没有参数。
子路由没有默认值，所以你必须选择一个。

src/app/app.component.ts (dragon-anchor)
content_copy<a [routerLink]="['/crisis-center', 1]">Dragon Crisis</a>

数组中的第一项标识原始路由 (/crisis-center)。

这个基本路由没有参数。
第二项标识子路由
e 数组 (1)。
结果的 path 是 /crisis-center/1。

你可以用 crisis center 路由重新定义 AppComponent 模板

src/app/app.component.ts (template)
content_copytemplate: `
  <h1 class="title">Angular Router</h1>
  <nav>
    <a [routerLink]="['/crisis-center']">crisis center</a>
    <a [routerLink]="['/crisis-center/1', { foo: 'foo' }]">Dragon Crisis</a>
    <a [routerLink]="['/crisis-center/2']">Shark Crisis</a>
  </nav>
  <router-outlet> </router-outlet>

链接参数数组提供了表示任何路由深度到任何合法序列的路由路径、路由器参数和路由参数对象的灵活性。

位置策略和浏览器 URL 样式

路由器可以创建一个“自然”URL，与需要页面加载的 URL 无法区分。

旧式浏览器会在 URL 更改后将页面请求发送到服务器，除非后面跟着“#”（称为“hash”）。路由器利用这个例外，创建一个带有 hash 的应用程序内路由 URL。这是一个指向 crisis center 的“hash URL”。

路由器支持这两种样式，通过两个位置策略提供者

PathLocationStrategy - 默认的“HTML5 pushState”样式。
PathLocationStrategy - “Hash URL”样式。

你可以在引导过程中选择通过覆盖来切换到 HashLocationStrategy。

选择路由策略

在服务器上渲染关键页面是一项技术，可以显著提高应用程序首次加载时的感知响应速度。原本需要十秒或更长时间才能启动的应用程序可以在服务器上呈现，并在不到一秒的时间内交付给用户的设备。

<base href>

路由器使用浏览器的 history.pushState API 来自定义应用程序内 URL 路径。

例如，localhost: 4200/crisis-center。应用程序内 URL 可能与服务器 URL 无法区分。

开发人员分两步使用 HTML5 URL

为路由器提供适当的 APP_BASE_HREF 值。
对所有 Web 资源使用根 URL（带 authority）：CSS、图片、脚本和 HTML 文件。
<base href> 路径必须以 "/" 结尾，因为浏览器会忽略路径中最后一个 "/" 之后的所有字符。
如果 <base href> 包含查询部分，则仅当页面中的链接路径为空且不包含查询时，才会使用该查询。这意味着 <base href> 中的查询仅在使用 HashLocationStrategy 时才包含。
如果页面中的链接是根路径，则不使用 <base href>。

Path Location Strategy

src/app/app.module.ts (hash URL strategy)
content_copyimport { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { Routes, RouterModule } from '@angular/router';

import { AppComponent } from './app.component';
import { PageNotFoundComponent } from './page-not-found/page-not-found.component';

const routes: Routes = [

];

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    RouterModule.forRoot(routes, { useHash: true })  // .../#/crisis-center/
  ],
  declarations: [
    AppComponent,
    PageNotFoundComponent
  ],
  providers: [

  ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

下一个主题Angular ng-module

Angular 常见路由任务

为路由添加组件

导入新组件

构建路由有三个基本构建块

1: 默认 CLI AppModule（通过路由）

2: CLI 应用程序路由模块

3: 在你的路由数组中定义路由。

将路由添加到你的应用程序。

带有 RouterLink 和 router-outlet 的模板

路由顺序

路由器

注意：示例使用了一个变量名，并根据 name 参数为其赋值。

设置通配符路由

显示 404 页面

设置重定向

嵌套路由

使用相对路径

获取路由信息

指定相对路由

访问查询参数

Component 导入语句

Component 2

延迟加载

防止未经授权的访问

为你的 guard 创建一个服务

链接参数数组

位置策略和浏览器 URL 样式

选择路由策略

<base href>

开发人员分两步使用 HTML5 URL

Path Location Strategy

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

选择题

AngularJS 教程

Angular 7 教程

Angular 其他

Angular + Spring

面试题

AngularJS 指令

Angular 常见路由任务

为路由添加组件

导入新组件

构建路由有三个基本构建块

1: 默认 CLI AppModule（通过路由）

2: CLI 应用程序路由模块

3: 在你的路由数组中定义路由。

将路由添加到你的应用程序。

带有 RouterLink 和 router-outlet 的模板

路由顺序

路由器

注意：示例使用了一个变量名，并根据 name 参数为其赋值。

设置通配符路由

显示 404 页面

设置重定向

嵌套路由

使用相对路径

获取路由信息

指定相对路由

访问查询参数

Component 导入语句

Component 2

延迟加载

防止未经授权的访问

为你的 guard 创建一个服务

链接参数数组

位置策略和浏览器 URL 样式

选择路由策略

<base href>

开发人员分两步使用 HTML5 URL

Path Location Strategy

相关帖子

使用 Angular 9/8 添加 Highcharts

Angular 文件上传

Angular 图表组件

Angular 图像上传，带裁剪、缩放、缩放

在 Angular 中从 Json 文件显示数据

在 Visual Studio 中设置 Angular 环境

Angular 9 特性

Angular 卡片

Angular 中的 10 位手机号码验证

Angular 的五个最佳单元测试工具

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器