【Angular】--路由与导航

【前言】

最近小编在学习angular前端框架，对于angular不是特别的熟悉，接下来总结一下最近的学习。

【正文】

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

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() 和 forChild() 来配置路由信息。

RouterModule.forRoot() 方法用于在主模块中定义主要的路由信息，通过调用该方法使得我们的主模块可以访问路由模块中定义的所有指令。接下来我们来看一下如何使用 forRoot() ：

// ... import { Routes,RouterModule } from '@angular/router'; export const ROUTES: Routes = []; @NgModule({ imports: [ BrowserModule,RouterModule.forRoot(ROUTES) ],// ... }) export class AppModule {}

我们通过使用const定义路由的配置信息，然后把它作为参数调用RouterModule.forRoot()方法，而不是直接使用RouterModule.forRoot([...])这种方式，这样做的好处是方便我们在需要的时候导出ROUTES到其它模块中。

动态路由

如果路由始终是静态的，那没有多大的用处。例如 path: '' 是加载我们 HomeComponent 组件的静态路由。我们将介绍动态路由，基于动态路由我们可以根据不同的路由参数，渲染不同的页面。

例如，如果我们想要在个人资料页面根据不同的用户名显示不同的用户信息，我们可以使用以下方式定义路由：

import { HomeComponent } from './home/home.component'; import { ProfileComponent } from './profile/profile.component'; export const ROUTES: Routes = [ { path: '',component: HomeComponent },{ path: '/profile/:username',component: ProfileComponent } ];

这里的关键点是 : ，它告诉 Angular 路由，:username 是路由参数，而不是 URL 中实际的部分。

现在我们已经建立一个动态路由，此时最重要的事情就是如何获取路由参数。要访问当前路由的相关信息，我们需要先从 @angular/router 模块中导入 ActivatedRoute ，然后在组件类的构造函数中注入该对象，最后通过订阅该对象的 params 属性，来获取路由参数，具体示例如下：

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); } }

介绍完动态路由，我们来探讨一下如何创建子路由。

子路由
实际上每个路由都支持子路由，假设在我们 /settings 设置页面下有 /settings/profile 和 /settings/password 两个页面，分别表示个人资料页和修改密码页。

我们可能希望我们的 / settings 页面拥有自己的组件，然后在设置页面组件中显示 / settings/profile 和 / settings/password 页面。我们可以这样做：

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,RouterModule.forRoot(ROUTES)
  ],})
export class AppModule {}

在这里，我们在 setttings 路由中定义了两个子路由，它们将继承父路由的路径，因此修改密码页面的路由匹配地址是 /settings/password ，依此类推。

接下来，我们需要做的最后一件事是在我们的 SettingsComponent 组件中添加 router-outlet 指令，因为我们要在设置页面中呈现子路由。如果我们没有在 SettingsComponent 组件中添加 router-outlet 指令，尽管 /settings/password 匹配修改密码页面的路由地址，但修改密码页面将无法正常显示。具体代码如下：

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 {}