Route 起步

2020-07-07 16:16 更新

开始本应用的一个简版,它在两个空路由之间导航。

用 Angular CLI 生成一个范例应用。

ng new angular-router-sample

定义路由

路由器必须用“路由定义”的列表进行配置。

每个定义都被翻译成了一个Route对象。该对象有一个 path 字段,表示该路由中的 URL 路径部分,和一个 component 字段,表示与该路由相关联的组件。

当浏览器的 URL 变化时或在代码中告诉路由器导航到一个路径时,路由器就会翻出它用来保存这些路由定义的注册表。

第一个路由执行以下操作:

  • 当浏览器地址栏的 URL 变化时,如果它匹配上了路径部分 "/crisis-center",路由器就会激活一个 CrisisListComponent 的实例,并显示它的视图。

  • 当应用程序请求导航到路径 "/crisis-center" 时,路由器激活一个 CrisisListComponent 的实例,显示它的视图,并将该路径更新到浏览器地址栏和历史。

第一个配置定义了由两个路由构成的数组,它们用最短路径指向了 CrisisListComponentHeroListComponent

生成 CrisisListHeroList 组件,以便路由器能够渲染它们。

ng generate component crisis-list

ng generate component hero-list

  1. Path:"src/app/crisis-list/crisis-list.component.html" 。

    <h2>CRISIS CENTER</h2>
    <p>Get your crisis here</p>

  1. Path:"src/app/hero-list/hero-list.component.html" 。

    <h2>HEROES</h2>
    <p>Get your heroes here</p>

注册 Router 和 Routes

为了使用 Router,你必须注册来自 @angular/router 包中的 RouterModule。定义一个路由数组 appRoutes,并把它传给 RouterModule.forRoot() 方法。RouterModule.forRoot() 方法会返回一个模块,其中包含配置好的 Router 服务提供者,以及路由库所需的其它提供者。一旦启动了应用,Router 就会根据当前的浏览器 URL 进行首次导航。

注:

  • RouterModule.forRoot() 方法是用于注册全应用级提供者的编码模式。要详细了解全应用级提供者。

Path:"src/app/app.module.ts (first-config)" 。

import { NgModule }             from '@angular/core';
import { BrowserModule }        from '@angular/platform-browser';
import { FormsModule }          from '@angular/forms';
import { RouterModule, Routes } from '@angular/router';


import { AppComponent }          from './app.component';
import { CrisisListComponent }   from './crisis-list/crisis-list.component';
import { HeroListComponent }     from './hero-list/hero-list.component';


const appRoutes: Routes = [
  { path: 'crisis-center', component: CrisisListComponent },
  { path: 'heroes', component: HeroListComponent },
];


@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    RouterModule.forRoot(
      appRoutes,
      { enableTracing: true } // <-- debugging purposes only
    )
  ],
  declarations: [
    AppComponent,
    HeroListComponent,
    CrisisListComponent,
  ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

对于最小化的路由配置,把配置好的 RouterModule 添加到 AppModule 中就足够了。但是,随着应用的成长,你将需要将路由配置重构到单独的文件中,并创建路由模块,路由模块是一种特殊的、专做路由的服务模块。

RouterModule.forRoot() 注册到 AppModuleimports 数组中,能让该 Router 服务在应用的任何地方都能使用。

添加路由出口

根组件 AppComponent 是本应用的壳。它在顶部有一个标题、一个带两个链接的导航条,在底部有一个路由器出口,路由器会在它所指定的位置上渲染各个组件。

路由出口扮演一个占位符的角色,表示路由组件将会渲染到哪里。

该组件所对应的模板是这样的:

Path:"src/app/app.component.html" 。

<h1>Angular Router</h1>
<nav>
  <a routerLink="/crisis-center" routerLinkActive="active">Crisis Center</a>
  <a routerLink="/heroes" routerLinkActive="active">Heroes</a>
</nav>
<router-outlet></router-outlet>

定义通配符路由

你以前在应用中创建过两个路由,一个是 "/crisis-center",另一个是 "/heroes"。 所有其它 URL 都会导致路由器抛出错误,并让应用崩溃。

可以添加一个通配符路由来拦截所有无效的 URL,并优雅的处理它们。 通配符路由的 path 是两个星号(**),它会匹配任何 URL。 而当路由器匹配不上以前定义的那些路由时,它就会选择这个通配符路由。 通配符路由可以导航到自定义的“404 Not Found”组件,也可以重定向到一个现有路由。

路由器会使用先到先得的策略来选择路由。 由于通配符路由是最不具体的那个,因此务必确保它是路由配置中的最后一个路由。

要测试本特性,请往 HeroListComponent 的模板中添加一个带 RouterLink 的按钮,并且把它的链接设置为一个不存在的路由 "/sidekicks"。

Path:"src/app/hero-list/hero-list.component.html (excerpt)" 。

<h2>HEROES</h2>
<p>Get your heroes here</p>


<button routerLink="/sidekicks">Go to sidekicks</button>

当用户点击该按钮时,应用就会失败,因为你尚未定义过 "/sidekicks" 路由。

不要添加 "/sidekicks" 路由,而是定义一个“通配符”路由,让它导航到 PageNotFoundComponent 组件。

Path:"src/app/app.module.ts (wildcard)" 。

{ path: '**', component: PageNotFoundComponent }

创建 PageNotFoundComponent,以便在用户访问无效网址时显示它。

ng generate component page-not-found

Path:"src/app/page-not-found.component.html (404 component)" 。

<h2>Page not found</h2>

现在,当用户访问 "/sidekicks" 或任何无效的 URL 时,浏览器就会显示 “Page not found” 。 浏览器的地址栏仍指向无效的 URL

设置跳转

应用启动时,浏览器地址栏中的初始 URL 默认是这样的:

localhost:4200

它不能匹配上任何硬编码进来的路由,于是就会走到通配符路由中去,并且显示 PageNotFoundComponent

这个应用需要一个有效的默认路由,在这里应该用英雄列表作为默认页。当用户点击 "Heroes" 链接或把 "localhost:4200/heroes" 粘贴到地址栏时,它应该导航到列表页。

添加一个 redirect 路由,把最初的相对 URL('')转换成所需的默认路径(/heroes)。

在通配符路由上方添加一个默认路由。 在下方的代码片段中,它出现在通配符路由的紧上方,展示了这个里程碑的完整 appRoutes

Path:"src/app/app-routing.module.ts (appRoutes)" 。

const appRoutes: Routes = [
  { path: 'crisis-center', component: CrisisListComponent },
  { path: 'heroes',        component: HeroListComponent },
  { path: '',   redirectTo: '/heroes', pathMatch: 'full' },
  { path: '**', component: PageNotFoundComponent }
];

浏览器的地址栏会显示 ".../heroes",好像你直接在那里导航一样。

重定向路由需要一个 pathMatch 属性,来告诉路由器如何用 URL 去匹配路由的路径。 在本应用中,路由器应该只有在*完整的 URL_等于 '' 时才选择 HeroListComponent 组件,因此要把 pathMatch 设置为 'full'。

聚焦 PATHMATCH

从技术角度看,pathMatch = 'full' 会导致 URL 中剩下的、未匹配的部分必须等于 ''。 在这个例子中,跳转路由在一个顶层路由中,因此剩下的_URL和完整的_URL是一样的。

pathMatch 的另一个可能的值是 'prefix',它会告诉路由器:当*剩下的_URL以这个跳转路由中的 prefix 值开头时,就会匹配上这个跳转路由。 但这不适用于此示例应用,因为如果 pathMatch 值是 'prefix',那么每个 URL 都会匹配 ''

尝试把它设置为 'prefix',并点击Go to sidekicks按钮。这是因为它是一个无效 URL,本应显示“Page not found” 页。 但是,你仍然在“英雄列表”页中。在地址栏中输入一个无效的 URL,你又被路由到了 /heroes。 每一个 URL,无论有效与否,都会匹配上这个路由定义。

默认路由应该只有在整个URL 等于 '' 时才重定向到 HeroListComponent,别忘了把重定向路由设置为 pathMatch = 'full'

小结

当用户单击某个链接时,该示例应用可以在两个视图之间切换。

本节涵盖了以下几点的做法:

  • 加载路由库。

  • 往壳组件的模板中添加一个导航条,导航条中有一些 A 标签、routerLink 指令和 routerLinkActive 指令。

  • 往壳组件的模板中添加一个 router-outlet 指令,视图将会被显示在那里。

  • RouterModule.forRoot() 配置路由器模块。

  • 设置路由器,使其合成 HTML5 模式的浏览器 URL

  • 使用通配符路由来处理无效路由。

  • 当应用在空路径下启动时,导航到默认路由。

初学者应用结构图:

本节产生的文件列表:

  1. Path:"app.component.html" 。

    <h1>Angular Router</h1>
    <nav>
      <a routerLink="/crisis-center" routerLinkActive="active">Crisis Center</a>
      <a routerLink="/heroes" routerLinkActive="active">Heroes</a>
    </nav>
    <router-outlet></router-outlet>

  1. Path:"app.module.ts" 。

    import { NgModule }             from '@angular/core';
    import { BrowserModule }        from '@angular/platform-browser';
    import { FormsModule }          from '@angular/forms';
    import { RouterModule, Routes } from '@angular/router';


    import { AppComponent }          from './app.component';
    import { CrisisListComponent }   from './crisis-list/crisis-list.component';
    import { HeroListComponent }     from './hero-list/hero-list.component';
    import { PageNotFoundComponent } from './page-not-found/page-not-found.component';


    const appRoutes: Routes = [
      { path: 'crisis-center', component: CrisisListComponent },
      { path: 'heroes', component: HeroListComponent },


      { path: '',   redirectTo: '/heroes', pathMatch: 'full' },
      { path: '**', component: PageNotFoundComponent }
    ];


    @NgModule({
      imports: [
        BrowserModule,
        FormsModule,
        RouterModule.forRoot(
          appRoutes,
          { enableTracing: true } // <-- debugging purposes only
        )
      ],
      declarations: [
        AppComponent,
        HeroListComponent,
        CrisisListComponent,
        PageNotFoundComponent
      ],
      bootstrap: [ AppComponent ]
    })
    export class AppModule { }

  1. Path:"hero-list/hero-list.component.html" 。

    <h2>HEROES</h2>
    <p>Get your heroes here</p>


    <button routerLink="/sidekicks">Go to sidekicks</button>

  1. Path:"crisis-list/crisis-list.component.html" 。

    <h2>CRISIS CENTER</h2>
    <p>Get your crisis here</p>

  1. Path:"page-not-found/page-not-found.component.html" 。

    <h2>Page not found</h2>

  1. Path:"index.html" 。

    <html lang="en">
      <head>
        <!-- Set the base href -->
        <base href="/">
        <title>Angular Router</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
      </head>


      <body>
        <app-root></app-root>
      </body>


    </html>
以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号