国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

angular4路由 知道這些就夠用了

caikeal / 2856人閱讀

摘要：路由使用命令創(chuàng)建根路由模塊或自己建一個(gè)路由配置文件如將文件修改為以后在這里改動(dòng)配置將路由配置導(dǎo)出為以供調(diào)用子模塊中的路由使用而不是在根模塊中引入路由為特性模塊定義的路由在其模塊中引入路由配置路徑組件路徑組件懶加載子模塊子模塊需要配置路由設(shè)置

angular 4 路由

使用cli命令創(chuàng)建根路由模塊 ng g cl app.router 或自己建一個(gè)路由配置文件 如:app/app.router.ts

// app/app.router.ts
// 將文件修改為

import { RouterModule, Routes } from "@angular/router";

const routes: Routes = [
  // 以后在這里改動(dòng)配置
  { path: "**", pathMatch: "full", redirectTo: "" }
];
// 將路由配置導(dǎo)出為 appRouting 以供調(diào)用, 子模塊中的路由使用 forChild 而不是 forRoot
export const appRouting = RouterModule.forRoot(routes);

在根模塊中引入路由, 為特性模塊定義的路由在其模塊中引入

// app/app.module.ts
import { appRouting } from "./router/router.module"
// @NgModule({
//  imports: [ ... ,
  appRouting
// ...
路由配置 
const routes: Routes = [
  // path:路徑 /news component:組件
  { path: "news",  component: Newsomponent },
  // path:路徑 /detail/1 component:組件
  { path: "detail/:id", component: DetailComponent },
  // 懶加載子模塊, 子模塊需要配置路由設(shè)置啟動(dòng)子組件
  { path: "other", loadChildren:"./other/other.module#otherModule" },
  // 重定向
  { path: "**", pathMatch: "full", redirectTo: "" }
];

pathMatch?: string; 默認(rèn)為前綴匹配 "prefix"; "full" 為完全匹配

outlet?: string; 路由目標(biāo)

children?: Routes; 子路由的規(guī)則

加載路由

在根組件或當(dāng)前組件的模板中

多個(gè)路由區(qū)域 
  { path: "news", outlet:"let1"  component: NewsComponent }
  { path: "news", outlet:"let2"  component: News2Cmponent }

即訪問 /news/ 時(shí)同時(shí)加載 NewsComponent 和 News2Cmponent 兩個(gè)組件

鏈接及訪問 
detail
{{news.title}}
Contact

routerLinkActive="active" 即在本路由激活時(shí)添加樣式 .active

或

import { Router } from "@angular/router";
// ...
constructor(private router: Router) {}

// ...

this.router.navigate(["/detail", this.news.id])
this.router.navigate([{ outlets: { let2: null }}]);

navigateByUrl 方法指向完整的絕對路徑

路由守衛(wèi)

適用于后臺(tái)管理等需要登錄才能使用的模塊

創(chuàng)建一個(gè)認(rèn)證服務(wù)

// app/auth.service.ts

import { Injectable }     from "@angular/core";
import { CanActivate }    from "@angular/router";

@Injectable()
export class AuthService implements CanActivate {
  canActivate() {
    // 這里判斷登錄狀態(tài), 返回 true 或 false
    return true;
  }
}

添加或修改路由配置

// app/app.router.ts

// 增加 CanActivate
import { CanActivate ... } from "@angular/router";


  // 配置中增加 canActivate 如:
  { path: "admin", canActivate:[AuthService] ... }
退出守衛(wèi)

適合于編輯器修改后的保存提示等場景

// app/deac.service.ts

import { Injectable }     from "@angular/core";
import { CanDeactivate, ActivatedRouteSnapshot, RouterStateSnapshot }    from "@angular/router";

// CanDeactivateComponent 是定義的接口,見下段代碼
import { CanDeactivateComponent } from "./can-deactivate.omponent";

@Injectable()
export class DeacService implements CanDeactivate {
  canDeactivate(
    canDeactivateComponent: CanDeactivateComponent,
    activatedRouteSnapshot: ActivatedRouteSnapshot,
    routerStateSnapshot: RouterStateSnapshot
  ) {
    // 目標(biāo)路由和當(dāng)前路由
    console.log(activatedRouteSnapshot);
    console.log(routerStateSnapshot);

    // 判斷并返回
    return canDeactivateComponent.canDeactivate ? canDeactivateComponent.canDeactivate() : true

  }
}
// can-deactivate.omponent.ts

// 接口組件, 返回 true 或 false 如表單發(fā)生改變則調(diào)用對話框服務(wù)
export interface CanDeactivateComponent {
  canDeactivate: () => Observable | Promise | boolean;
}

路由配置

{
  path: ...,
  canDeactivate: [DeacService],
  component: ...
}

模塊中添加服務(wù)

providers: [
  DeactivateGuardService
]

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/86981.html

相關(guān)文章

  • Angular2 VS Angular4 深度對比：特性、性能

    摘要：的特性和性能是的超集，用于幫助的開發(fā)。注解提供了連接元數(shù)據(jù)和功能的工具。通過在庫中提供基本信息可以調(diào)用函數(shù)或創(chuàng)建類的實(shí)例來檢查相關(guān)元數(shù)據(jù)，從而簡化了對象實(shí)例的構(gòu)建。停用它會(huì)響應(yīng)跳出舊控制器的成功事件。 showImg(https://segmentfault.com/img/bVSqTU?w=850&h=460); 在Web應(yīng)用開發(fā)領(lǐng)域，Angular被認(rèn)為是最好的開源JavaScri...

    孫淑建 評(píng)論0 收藏0

  • 使用Angular4動(dòng)畫為頁面添彩

    摘要：使用組件將根據(jù)視口放置，并滑過頁面。這意味著我們不能使用狀態(tài)來對路由組件進(jìn)行樣式，因?yàn)檫@樣可以將樣式應(yīng)用于父結(jié)點(diǎn)我們的示例中的主元素，而不是路由組件。 原文：Angular?—?Supercharge your Router transitions using new animation features (v4.3+) 首先我們看一下效果展示的demo Basic Variation...

    jay_tian 評(píng)論0 收藏0

  • 利用angular4和nodejs-express構(gòu)建簡單網(wǎng)站（十一）—HttpClient攔截器和

    摘要：攔截器的官方解釋為攔截機(jī)制是中的主要特性之一。使用這種攔截機(jī)制，你可以聲明一些攔截器，用它們監(jiān)視和轉(zhuǎn)換從應(yīng)用發(fā)送到服務(wù)器的請求。最后調(diào)用，以便這個(gè)請求流能走到下一個(gè)攔截器，并最終傳給后端處理器。 上一節(jié)介紹了好友模塊，這一節(jié)介紹和好友模塊中的控件有關(guān)的三個(gè)服務(wù)程序。 用HttpClient攔截器發(fā)送用戶認(rèn)證信息 在進(jìn)入好友模塊之前，需要向服務(wù)器發(fā)送認(rèn)證信息，在這里使用angular的H...

    Eric 評(píng)論0 收藏0

  • 使用angular4.0來搭建一個(gè)博客類的項(xiàng)目

    摘要：前言也就是的最新版本最近也是大紅大紫的公司項(xiàng)目主管推上學(xué)習(xí)日程自己也就抽時(shí)間寫了一個(gè)小的博客類的意在于去看一下最新的特性和的語法由于剛接觸和所以有點(diǎn)小糙望見諒項(xiàng)目原址我是項(xiàng)目地址我是地址項(xiàng)目簡介整個(gè)項(xiàng)目是使用腳手架搭建的項(xiàng)目目錄結(jié)構(gòu)項(xiàng)目功 前言 angular也就是angular.js的最新版本,最近也是大紅大紫的公司項(xiàng)目主管推上學(xué)習(xí)日程,自己也就抽時(shí)間寫了一個(gè)小的博客類的demo,意...

    BakerJ 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<