Angular 路由(Day24)

在完成登入功能之前，我想要先介绍一下Angular的路由系统

Angular Routing:

In a single-page app, you change what the user sees by showing or hiding portions of the >display that correspond to particular components, rather than going out to the server to get a >new page. As users perform application tasks, they need to move between the different views that you have defined.

在SPA的架构下我们有别於以往向server请求并转导至下一个页面的方式，更倾向於将各部分的componens隐藏或显示，因此Angular router可以协助我们处理要如何把视页进行转换的工作。

接着就让我们来实际操作一遍吧~!

首先建立component

ng generate component index  #建立首页component
ng generate component error  #建立一个错误component

将 error component 内的error.html改成404 not found

<p>404 NOT FOUND</p>

再来我们要去设定一下AppModule

import { IndexComponent } from './index/index.component';
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { LoginComponent } from './login/login.component';
import { HttpClientModule } from '@angular/common/http';
import { RouterModule,  Routes } from '@angular/router';
import { ErrorComponent } from './error/error.component';

// 路径设定
const routes: Routes  = [
  {path: 'login', component: LoginComponent},
  {path: 'index', component: IndexComponent},
  {path: '**', component: ErrorComponent}  // 万用路由，不可设在前面
];

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    ErrorComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    ReactiveFormsModule,
    HttpClientModule,
		// 导入设定
    RouterModule.forRoot(routes),
  ],
  providers: [],
  bootstrap: [AppComponent],
  exports: [RouterModule]
})
export class AppModule { }

接着我们引入RouterModule &Routes 来进行路由设定
在Routes 内有以下的设定可以使用

interface Route {
  path?: string // 路径
  pathMatch?: string // 路径匹配的策略 设定为'full'表示须完全符合path才可以请求
  matcher?: UrlMatcher // 自订的匹配规则
  component?: Type<any> //路径匹配到时会实体化的元件
  redirectTo?: string // 路径匹配时重新导向到的 URL
  canActivate?: any[] //权限设定
  canActivateChild?: any[] //对子路径的权限设定
  canDeactivate?: any[] //DI 令牌阵列，以确定是否允许当前使用者停用该元件。
  canLoad?: any[] //是否允许载入元件
  data?: Data //ActivatedRoute 提供给元件的由开发人员定义的额外资料。预设情况下，不传递任何额外资料。
  resolve?: ResolveData //DI 令牌的对映，用於查询资料解析器。请参阅 Resolve 。
  children?: Routes //一个子 Route 物件阵列，用於指定巢状路由配置。
  loadChildren?: LoadChildren //一个物件，指定要延迟载入的子路由。
  runGuardsAndResolvers?: RunGuardsAndResolvers //定义何时执行守卫（guard）和解析器（resolver）。
}

有很多功能设定眼花撩乱，但等需要用到功能再去查阅就好，
我们此次先使用path? & component?这两个参数设定就好

import { IndexComponent } from './index/index.component';
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { LoginComponent } from './login/login.component';
import { HttpClientModule } from '@angular/common/http';
import { RouterModule,  Routes } from '@angular/router';
import { ErrorComponent } from './error/error.component';

const routes: Routes = [
  {path: 'login', component: LoginComponent},
  {path: 'index', component: IndexComponent},
  {path: '**', component: ErrorComponent}  // 万用路由，不可设在前面
];

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    ErrorComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    ReactiveFormsModule,
    HttpClientModule,
    RouterModule.forRoot(routes),
  ],
  providers: [],
  bootstrap: [AppComponent],
  exports: [RouterModule]
})
export class AppModule { }

将路径和元件进行绑定後，我们再前往app.component.html

<router-outlet></router-outlet>  #把其他selector模板换掉，改成这个

RouterOutlet:

Acts as a placeholder that Angular dynamically fills based on the current router state.
会负责将routes的路由设定实现

接着就可以看到当我们什麽路径都没打 http://localhost:4200
就会看到

http://localhost:4200/login

http://localhost:4200/index

参考资料

Angular中文文件-Route