Angular 4.x 路由快速入门
路由是 Angular 应用程序的核心,它加载与所请求路由相关联的组件,以及获取特定路由的相关数据。这允许我们通过控制不同的路由,获取不同的数据,从而渲染不同的页面。 接下来我们将按照以下目录的内容,介绍 Angular 的路由。具体目录如下: 目录
Installing the router首先第一件事,我们需要安装 Angular Router。你可以通过运行以下任一操作来执行此操作: yarn add @angular/router # OR npm i --save @angular/router 以上命令执行后,将会自动下载 Base href我们需要做的最后一件事,是将 这件事操作起来很简单,只需打开项目中的 <!doctype html> <html> <head> <base href="/"> <title>Application</title> </head> <body> <app-root></app-root> </body> </html> 以上配置信息告诉 Angular 路由,应用程序的根目录是 Using the router要使用路由,我们需要在 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 ] }) export class AppModule {} 此时我们的路由还不能正常工作,因为我们还未配置应用程序路由的相关信息。 RouterModule.forRoot()RouterModule.forRoot() 方法用于在主模块中定义主要的路由信息,通过调用该方法使得我们的主模块可以访问路由模块中定义的所有指令。接下来我们来看一下如何使用 // ... import { Routes,RouterModule } from '@angular/router'; export const ROUTES: Routes = []; @NgModule({ imports: [ BrowserModule,RouterModule.forRoot(ROUTES) ],// ... }) export class AppModule {} 我们通过使用 RouterModule.forChild()RouterModule.forChild() 与 Router.forRoot() 方法类似,但它只能应用在特性模块中。
这个功能非常强大,因为我们不必在一个地方(我们的主模块)定义所有路由信息。反之,我们可以在特性模块中定义模块特有的路由信息,并在必要的时候将它们导入我们主模块。 import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { Routes,RouterModule } from '@angular/router'; export const ROUTES: Routes = []; @NgModule({ imports: [ CommonModule,RouterModule.forChild(ROUTES) ],// ... }) export class ChildModule {} 通过以上示例,我们知道在主模块和特性模块中,路由配置对象的类型是一样的,区别只是主模块和特性模块中需调用不同的方法,来配置模块路由。接下来我们来介绍一下如何配置 Configuring a route我们定义的所有路由都是作为 import { Routes,RouterModule } from '@angular/router'; import { HomeComponent } from './home/home.component'; export const ROUTES: Routes = [ { path: '',component: HomeComponent } ]; @NgModule({ imports: [ BrowserModule,// ... }) export class AppModule {} 示例中我们通过
Displaying routes配置完路由信息后,下一步是使用一个名为 在我们 import { Component } from '@angular/core'; @Component({ selector: 'app-root',template: ` <div class="app"> <h3>Our app</h3> <router-outlet></router-outlet> </div> ` }) export class AppComponent {} 我们现在已经建立了应用程序的主路由,我们可以进一步了解路由的其它配置选项。 Further configuration到目前为止我们已经介绍的内容只是一个开始 ,接下来我们来看看其它一些选项和功能。 Dynamic routes如果路由始终是静态的,那没有多大的用处。例如 例如,如果我们想要在个人资料页面根据不同的用户名显示不同的用户信息,我们可以使用以下方式定义路由: import { HomeComponent } from './home/home.component'; import { ProfileComponent } from './profile/profile.component'; export const ROUTES: Routes = [ { path: '',component: HomeComponent },{ path: '/profile/:username',component: ProfileComponent } ]; 这里的关键点是
现在我们已经建立一个动态路由,此时最重要的事情就是如何获取路由参数。要访问当前路由的相关信息,我们需要先从 import { Component,OnInit } from '@angular/core'; import { ActivatedRoute } from '@angular/router'; @Component({ selector: 'profile-page',template: ` <div class="profile"> <h3>{{ username }}</h3> </div> ` }) export class SettingsComponent implements OnInit { username: string; constructor(private route: ActivatedRoute) {} ngOnInit() { this.route.params.subscribe((params) => this.username = params.username); } } 介绍完动态路由,我们来探讨一下如何创建 Child routes实际上每个路由都支持子路由,假设在我们 我们可能希望我们的 import { SettingsComponent } from './settings/settings.component'; import { ProfileSettingsComponent } from './settings/profile/profile.component'; import { PasswordSettingsComponent } from './settings/password/password.component'; export const ROUTES: Routes = [ { path: 'settings',component: SettingsComponent,children: [ { path: 'profile',component: ProfileSettingsComponent },{ path: 'password',component: PasswordSettingsComponent } ] } ]; @NgModule({ imports: [ BrowserModule,}) export class AppModule {} 在这里,我们在 接下来,我们需要做的最后一件事是在我们的 import { Component } from '@angular/core'; @Component({ selector: 'settings-page',template: ` <div class="settings"> <settings-header></settings-header> <settings-sidebar></settings-sidebar> <router-outlet></router-outlet> </div> ` }) export class SettingsComponent {} Component-less routes另一个很有用的路由功能是 例如,我们可以定义 import { ProfileSettingsComponent } from './settings/profile/profile.component'; import { PasswordSettingsComponent } from './settings/password/password.component'; export const ROUTES: Routes = [ { path: 'settings',}) export class AppModule {} 此时, loadChildren我们也可以告诉路由从另一个模块中获取子路由。这将我们谈论的两个想法联系在一起 - 我们可以指定另一个模块中定义的子路由,以及通过将这些子路由设置到特定的路径下,来充分利用 让我们创建一个 import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { Routes,RouterModule } from '@angular/router'; export const ROUTES: Routes = [ { path: '',component: PasswordSettingsComponent } ] } ]; @NgModule({ imports: [ CommonModule,}) export class SettingsModule {} 需要注意的是,在 另一个主要的区别是我们将 那么 export const ROUTES: Routes = [ { path: 'settings',loadChildren: './settings/settings.module#SettingsModule' } ]; @NgModule({ imports: [ BrowserModule,// ... }) export class AppModule {} 需要注意的是,我们没有将 另外我们传递一个字符串作为
了解完路由的一些高级选项和功能,接下来我们来介绍路由指令。 Router Directives除了 routerLink为了让我们链接到已设置的路由,我们需要使用 <nav> <a routerLink="/">Home</a> <a routerLink="/settings/password">Change password</a> <a routerLink="/settings/profile">Profile Settings</a> </nav> 当我们点击以上的任意链接时,页面不会被重新加载。反之,我们的路径将在 URL 地址栏中显示,随后进行后续视图更新,以匹配
如果我们想要链接到动态的路由地址,且该地址有一个 <a [routerLink]="['/profile',username]"> Go to {{ username }}'s profile. </a> routerLinkActive在实际开发中,我们需要让用户知道哪个路由处于激活状态,通常情况下我们通过向激活的链接添加一个 class 来实现该功能。为了解决上述问题,Angular 路由模块为我们提供了 <nav> <a routerLink="/settings" routerLinkActive="active">Home</a> <a routerLink="/settings/password" routerLinkActive="active">Change password</a> <a routerLink="/settings/profile" routerLinkActive="active">Profile Settings</a> </nav> 通过使用 最后,我们来简单介绍一下 Router API。 Router API我们可以通过路由还提供的 API 实现与 import { Component } from '@angular/core'; import { Router } from '@angular/router'; @Component({ selector: 'app-root',template: ` <div class="app"> <h3>Our app</h3> <router-outlet></router-outlet> </div> ` }) export class AppComponent { constructor(private router: Router) {} } 组件类中注入的 import { Component,OnInit } from '@angular/core'; import { Router } from '@angular/router'; @Component({ selector: 'app-root',template: ` <div class="app"> <h3>Our app</h3> <router-outlet></router-outlet> </div> ` }) export class AppComponent implements OnInit { constructor(private router: Router) {} ngOnInit() { setTimeout(() => { this.router.navigate(['/settings']); },5000); } } 若以上代码成功运行,用户界面将在 5 秒后被重定向到 另一个使用示例是演示页面跳转时如何传递数据,具体如下: import { Component,template: ` <div class="app"> <h3>Users</h3> <div *ngFor="let user of users"> <user-component [user]="user" (select)="handleSelect($event)"> </user-component> </div> <router-outlet></router-outlet> </div> ` }) export class AppComponent implements OnInit { users: Username[] = [ { name: 'toddmotto',id: 0 },{ name: 'travisbarker',id: 1 },{ name: 'tomdelonge',id: 2 } ]; constructor(private router: Router) {} handleSelect(event) { this.router.navigate(['/profile',event.name]); } } Angular 路由的功能非常强大,既可以使用指令方式也可以使用命令式 API,希望本文可以帮助你尽快入门,若要进一步了解路由详细信息,请访问 - Angular Router 官文文档。 我有话说除了使用
|