angular4實戰（2） router

wanglu1209 發布于2019-08-21 16:43 / 3224人閱讀

摘要：在上一章節，通過新建項目之后，會自動引入路由模塊，接下來需要做的事情就是對路由模塊進行配置。為了方便維護，多帶帶把路由模塊的配置拿出來，再去輸出到中。路由守衛業務需求是在沒有登錄的情況下，是不允許跳入到下一個頁面的。

router

單頁面應用通過路由來去渲染不同的視圖，為用戶在同一個頁面看到不同的場景，提供基礎服務。

在上一章節，通過新建項目之后，ngModule會自動引入路由模塊，接下來需要做的事情就是對路由模塊進行配置。為了方便維護，多帶帶把路由模塊的配置拿出來，再去輸出到ngModule中。

import {NgModule} from "@angular/core";
import {Routes, RouterModule} from "@angular/router";
import {LoginComponent} from "./core/login/login.component";
import {NotFoundComponent} from "./core/not-found/not-found.component";
import {Auth} from "./core/login/login.Auth";

const routes: Routes = [
  {path: "login", component: LoginComponent},
  {path: "stones", loadChildren: "./stones/stones.module#StonesModule", canActivate: [Auth]},
  {path: "", redirectTo: "/login", pathMatch: "full"},
  {path: "**", component: NotFoundComponent}
];

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

在app組件下，暫時只引了三個組件，一個是項目啟動的默認登錄頁面，一個是404頁面，另一個是stones組件，這個組件又會作為一個父級的路由容器來去管理他下面的頁面。

這樣做的理由是，為了在頁面多了之后方便管理，層級上面一定要分明，不能扁平化，所有的東西都一股腦的掛在app下面。通過引入stones路由，再讓stones路由去管理其他的子路由是一個不錯的選擇。
項目結構如下：

（ps：項目本身一直在寫，之后可能有所改變，但思路不變，不直接通過app根節點去管理）

在路由的具體的配置方面：

{path: "", redirectTo: "/login", pathMatch: "full"}

redirectTo表示在頁面路由為空時（一般是剛進入項目），會重定向到login頁面。

{path: "**", component: NotFoundComponent}

路由是根據path自上而下匹配的，如果說瀏覽器中的地址上的路由變成一個不存在的值時，那么會一直向下匹配，直到匹配到**，這個可以匹配任意路由的配置，這也是做404頁面的原理，因此一定要把**這個配置寫在最后一行。

  {path: "stones", loadChildren: "./stones/stones.module#StonesModule", canActivate: [Auth]},

路由守衛

業務需求是在沒有登錄的情況下，是不允許跳入到下一個頁面的。這時路由守衛就派上了用場。

用CanActivate來處理導航到某路由的情況。
用CanDeactivate來處理從當前路由離開的情況.

最常用的是這兩個屬性，類似于react的enter和leave，只是描述不同，都是用來對進入和離開路由做限制的，它們接受一個布爾值，來是否同意用戶在路由上做跳轉。

以一個登錄舉例，這里引入的Auth，是一個判斷是否登錄的方法。
login.Auth.ts：

import {Injectable} from "@angular/core";
import {Router, CanActivate} from "@angular/router";
import {NotyService} from "../../service/noty/noty.service";

@Injectable()
export class Auth implements CanActivate {
  constructor(private noty: NotyService, private route: Router) {
  }

  canActivate() {
    return sessionStorage.getItem("user")
      ? true
      : (this.noty.alert({
        text: "????請登錄~~????"
      }), this.route.navigate(["/login"]), false);
  }
}

直接在瀏覽器中更改stones路由，就會觸發這個函數，以此來檢測是否登錄。

本章路由到此為止，下一章節主要講UI框架的引入及在ts中引用js插件。

項目地址：https://github.com/jiwenjiang...

云服務器 GPU云服務器 hadoop實戰2 hadoop實戰第2版 angular4 Router

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/88656.html

Angular4 實戰開發

摘要：實戰系列目前處于章節不定，內容不定階段，這一系列文章不會長篇大論的講解概念，而是以用為主，結合通俗易懂的實例來讓大家理解常用的知識點。原文鏈接實戰開發《Angular 實戰系列》目前處于章節不定，內容不定階段，這一系列文章不會長篇大論的講解概念，而是以用為主，結合通俗易懂的實例來讓大家理解常用的知識點。章節 Angular CLI 創建組件(Component) 使用CSS美化組...

Hegel_Gu 2019-08-21 11:44 評論0 收藏0
Angular4 實戰開發

摘要：實戰系列目前處于章節不定，內容不定階段，這一系列文章不會長篇大論的講解概念，而是以用為主，結合通俗易懂的實例來讓大家理解常用的知識點。原文鏈接實戰開發《Angular 實戰系列》目前處于章節不定，內容不定階段，這一系列文章不會長篇大論的講解概念，而是以用為主，結合通俗易懂的實例來讓大家理解常用的知識點。章節 Angular CLI 創建組件(Component) 使用CSS美化組...

vboy1010 2019-08-01 16:59 評論0 收藏0
angular4路由知道這些就夠用了

摘要：路由使用命令創建根路由模塊或自己建一個路由配置文件如將文件修改為以后在這里改動配置將路由配置導出為以供調用子模塊中的路由使用而不是在根模塊中引入路由為特性模塊定義的路由在其模塊中引入路由配置路徑組件路徑組件懶加載子模塊子模塊需要配置路由設置 angular 4 路由使用cli命令創建根路由模塊 ng g cl app.router 或自己建一個路由配置文件如:app/app.rou...

caikeal 2019-08-21 11:40 評論0 收藏0
angular4學習記錄 -- 路由

摘要：通過設置路由參數，控制輔助路由的插座是否顯示組件內容。具體設置路由守衛在設置路由守衛時需先做下面兩步一在中添加二在中添加需要守衛的路由的或者，前兩個是數組形式，是對象形式。在路由激活之前獲取路由數據在文件中實現接口 Angular4 路由路由時傳遞數據 1.在查詢參數中傳遞數據 /product?id=1&name=2 => ActivateRoute.queryParams[id]...

FullStackDeveloper 2019-08-21 16:41 評論0 收藏0