Angular8路由配置（一）

時間 2019-11-21

標籤 angular8 angular 路由配置欄目 AngularJS 简体版

原文原文鏈接

前言：單頁應用中，組件時構建應用的基礎元素，頁面展現什麼內容均是靠頁面有什麼組件決定的，而展現什麼組件又是由一組路由（帶有Url元素的特定集合，可用於導航視圖）決定的，但願本文能夠幫助讀者瞭解路由的基礎概念和基礎使用、寫法。

簡單的路由配置

路由模塊 app-routing.module.ts
構建一個簡單的企業經常使用官網案例，一般這類網站頭部與底部基本是固定得純html，涉及動態改變的部分（顏色、內容）才和路由扯上關係。html

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { IndexComponent } from './component/index/index.component';
import { AboutComponent } from './component/about/about.component';
import { ContactComponent } from './component/contact/contact.component';
import { NewsComponent } from './component/news/news.component';

// 假設只有一級導航
const routes: Routes = [
  // 避免進入網站中間內容部分空白，設置默認導航
  {
    path: '',
    redirectTo: 'index',
    pathMatch: 'full'
  },
  {
    path: 'index',
    component: IndexComponent,
    data: {
      title: '公司主頁'
    }
  },
  {
    path: 'about',
    component: AboutComponent,
    data: {
      title: '關於咱們'
    }
  },
  {
    path: 'contact',
    component: ContactComponent,
    data: {
      title: '聯繫咱們'
    }
  },
  {
    path: 'news',
    component: NewsComponent,
    data: {
      title: '公司動態'
    }
  }
];

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

在App模塊的聲明數組中加入所需導航的所有組件（Angular目前腳手架會自動幫添加建立的組件到根模塊或者指定模塊）；
App組件的模板：bootstrap

<!-- NG-ZORRO -->
<app-header></app-header>
<div nz-row class="main">
  <div nz-col nzSpan="24">
    <router-outlet></router-outlet>
  </div>
</div>
<app-footer></app-footer>

目前路由到視圖之間的映射關係基本肯定，還須要提供下html中連接導航如何實現，代碼以下：
header.component.html數組

<div nz-row class="app-header">
  <div nz-col nzSpan="6"></div>
  <div nz-col nzSpan="4" class="logo">
    <img src="assets/logo.png" alt="">
  </div>
  <div nz-col nzSpan="2">
    <a [routerLink]="['/']" routerLinkActive="router-link-active">首頁</a>
  </div>
  <div nz-col nzSpan="2">
    <a [routerLink]="['/about']" routerLinkActive="router-link-active">公司簡介</a>
  </div>
  <div nz-col nzSpan="2">
    <a [routerLink]="['/news']" routerLinkActive="router-link-active">公司動態</a>
  </div>
  <div nz-col nzSpan="2">
    <a [routerLink]="['/contact']" routerLinkActive="router-link-active">聯繫咱們</a>
  </div>
  <div nz-col nzSpan="6"></div>
</div>

路由配置這裏還欠缺一個異常路由處理promise

core.js:9110 ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'about123'
Error: Cannot match any routes. URL Segment: 'about123'

將下面的代碼添加到路由配置最後antd

{
    path: 'error',
    component: ErrorComponent,
    data: {
      title: '參數錯誤或者地址不存在'
    }
  },
  {
    path: '**',
    redirectTo: 'error',
    pathMatch: 'full'
  }

多級路由配置

需求：公司動態改爲新聞動態-行業新聞和公司新聞app

{
    path: 'news',
    component: NewsComponent,
    children: [
      {
        path: '',
        redirectTo: 'hyxw',
        pathMatch: 'full'
      },
      {
        path: 'hyxw',
        component: HyxwComponent,
        data: {
          title: '行業新聞'
        }
      },
      {
        path: 'gsxw',
        component: GsxwComponent,
        data: {
          title: '公司新聞'
        }
      }
    ]
  }

header.component.html框架

<div nz-row class="app-header">
  <div nz-col nzSpan="6"></div>
  <div nz-col nzSpan="4" class="logo">
    <img src="assets/logo.png" alt="">
  </div>
  <div nz-col nzSpan="2">
    <a [routerLink]="['/']" routerLinkActive="router-link-active">首頁</a>
  </div>
  <div nz-col nzSpan="2">
    <a [routerLink]="['/about']" routerLinkActive="router-link-active">公司簡介</a>
  </div>
  <div nz-col nzSpan="2">
    <a nz-dropdown [nzDropdownMenu]="menu">新聞動態</a>
  </div>
  <div nz-col nzSpan="2">
    <a [routerLink]="['/contact']" routerLinkActive="router-link-active">聯繫咱們</a>
  </div>
  <div nz-col nzSpan="6"></div>
  <nz-dropdown-menu #menu="nzDropdownMenu">
    <ul nz-menu nzSelectable>
      <li nz-menu-item>
        <a [routerLink]="['/news/hyxw']" routerLinkActive="router-link-active">行業新聞</a>
      </li>
      <li nz-menu-item>
        <a [routerLink]="['/news/gsxw']" routerLinkActive="router-link-active">公司新聞</a>
      </li>
    </ul>
  </nz-dropdown-menu>
</div>

news.component.htmlide

<div class="app-news">
  <router-outlet></router-outlet>
</div>

路由懶加載

固然咱們使用這麼高級得框架只是作一個這麼靜態得企業官網是真的有點秀了，實際項目中頁面內容和組件繁多，若是不使用懶加載，整個應用首次渲染會很耗時，如同整個頁面圖片所有渲染和懶加載圖片模式同樣，咱們得路由模式中也是能夠配置懶加載得。
修改以下：
app路由和根模塊網站

const routes: Routes = [
  {
    path: '',
    loadChildren: () => import('./pages/pages.module').then(m => m.PagesModule)
  },
  {
    path: 'error',
    component: ErrorComponent,
    data: {
      title: '參數錯誤或者地址不存在'
    }
  },
  {
    path: '**',
    redirectTo: 'error',
    pathMatch: 'full'
  }
];

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { NgZorroAntdModule, NZ_I18N, zh_CN } from 'ng-zorro-antd';
import { FormsModule } from '@angular/forms';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { registerLocaleData } from '@angular/common';
import zh from '@angular/common/locales/zh';
import { CommonInterceptor } from './core/core/interceptor';
import { ErrorComponent } from './error/error.component';
import { HeaderComponent } from './component/header/header.component';
import { FooterComponent } from './component/footer/footer.component';

registerLocaleData(zh);

@NgModule({
  declarations: [
    AppComponent,
    ErrorComponent,
    HeaderComponent,
    FooterComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    NgZorroAntdModule,
    FormsModule,
    HttpClientModule,
    BrowserAnimationsModule
  ],
  providers: [
    { provide: NZ_I18N, useValue: zh_CN },
    { provide: HTTP_INTERCEPTORS, useClass: CommonInterceptor, multi: true }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

pages路由模塊和pages模塊spa

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { IndexComponent } from '../component/index/index.component';
import { AboutComponent } from '../component/about/about.component';
import { ContactComponent } from '../component/contact/contact.component';
import { NewsComponent } from '../component/news/news.component';
import { HyxwComponent } from '../component/hyxw/hyxw.component';
import { GsxwComponent } from '../component/gsxw/gsxw.component';


const routes: Routes = [
  {
    path: '',
    redirectTo: 'index',
    pathMatch: 'full'
  },
  {
    path: 'index',
    component: IndexComponent,
    data: {
      title: '公司主頁'
    }
  },
  {
    path: 'about',
    component: AboutComponent,
    data: {
      title: '關於咱們'
    }
  },
  {
    path: 'contact',
    component: ContactComponent,
    data: {
      title: '聯繫咱們'
    }
  },
  {
    path: 'news',
    loadChildren: () => import('../component/news/news.module').then(m => m.NewsModule)
  },
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class PagesRoutingModule { }

pages模塊：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { PagesRoutingModule } from './pages-routing.module';
import { PagesComponent } from './pages.component';
import { IndexComponent } from '../component/index/index.component';
import { AboutComponent } from '../component/about/about.component';
import { ContactComponent } from '../component/contact/contact.component';


@NgModule({
  declarations: [
    PagesComponent,
    IndexComponent,
    AboutComponent,
    ContactComponent,
  ],
  imports: [
    CommonModule,
    PagesRoutingModule
  ],
  bootstrap: [PagesComponent]
})
export class PagesModule { }

news路由和模塊參照pages便可，改造先後首頁渲染截圖對比：