免费观看又色又爽又黄的小说免费_美女福利视频国产片_亚洲欧美精品_美国一级大黄大色毛片

Angular中Route路由的示例分析

這篇文章主要介紹Angular中Route路由的示例分析，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

專注于為中小企業提供做網站、網站制作服務,電腦端+手機端+微信端的三站合一,更高效的管理,為中小企業瑪納斯免費做網站提供優質的服務。我們立足成都，凝聚了一批互聯網行業人才，有力地推動了數千家企業的穩健成長，幫助中小企業通過網站建設實現規模擴充和轉變。

Angular 路由（Route）

我們可以將路由器理解成控制整個應用狀態的視圖對象， 每個應用都有一個路由器； 路由器的另一個作用是為每個視圖分配唯一的 url， 可以利用這個 url 使應用之間跳轉到某一個特定的視圖狀態。 單頁應用其實就是一個視圖狀態的集合。

相關教程推薦：《angular教程》

單頁應用（SPA）

一個單頁應用是主頁面只加載一次， 不再重復刷新， 只是改變頁面部分內容的應用。 Angular 應用就是單頁應用， 在 Angular 中使用路由器來實現根據用戶的操作來改變頁面的內容而不重新加載頁面。 單頁應用可以理解為一個視圖狀態的集合。

路由對象

Angular中Route路由的示例分析

Routes 路由數組

路由器需要先配置才會有路由信息, 并用 RouterModule.forRoot 方法來配置路由器。 當瀏覽器的 URL 變化時， 路由器會查找對應的 Route（路由）， 并據此決定該顯示哪個組件。
基礎配置：

const appRoutes: Routes = [
  { path: 'common/a', component: AComponent },
  { path: 'common/b/:id', component: BComponent },
  { path: '**', component: NotFoundComponent}, // 定義通配符路由
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
  ...
})
RouterOutlet 路由出口

RouterOutlet 是一個來自路由模塊中的指令，它的用法類似于組件。 它扮演一個占位符的角色，用于在模板中標出一個位置，路由器將會把要顯示在這個出口處的組件顯示在這里。

 <h2>組件的內容顯示在（router-outlet）下方</h2>
 <router-outlet></router-outlet>
Router 路由器

使用 Router 對象導航。

constructor(private router: Router) {}

toAComponent() {
    this.router.navigate(['/common/a']);
    // 或 this.router.navigateUrl('common/a');
}
RouterLink 路由器鏈接

路由鏈接 url 必須以 ‘/’ 開頭。

<a [routerLink]="['/']">主頁</a>
<a [routerLink]="['/common/b', id]">B組件</a>
<router-outlet></router-outlet>
ActivatedRoute 激活的路由

當前激活的路由的路徑和參數可以通過 ActivateRoute 的路由服務來獲取。

  • 常用屬性：

    屬性說明
    url路由路徑的 Observable 對象，是一個由路由路徑中的各個部分組成的字符串數組.
    data一個 Observable，其中包含提供給路由的 data 對象。也包含由解析守衛（resolve guard）解析而來的值。
    paramMap一個 Observable，其中包含一個由當前路由的必要參數和可選參數組成的 map 對象。用這個 map 可以獲取來自同名參數的單一值或多重值。
    queryParamMap一個 Observable，其中包含一個對所有路由都有效的查詢參數組成的 map 對象。 用這個 map 可以獲取來自查詢參數的單一值或多重值。
在路由時傳遞數據

  • 在查詢參數中傳遞數據

/common/b?id=1&name=2 => ActivatedRoute.queryParamMap

  • 在路由路徑中傳遞數據

{path: /common/b/:id} => /commo/b/1 => ActivatedRoute.paramMap

  • 在路由配置中傳遞數據

{path: /common/b, component: BComponent, data: {id:“1”, title: “b”}}

  • 示例

constructor(
    private activatedRoute: ActivatedRoute
) { }

ngOnInit() {
   // 從參數中獲取
    this.activatedRoute.queryParamMap.subscribe(params => {
      this.id = params.get('id');
    });

   // 或
  // this.activated.snapshot.queryParamMap.get('id');

    // 從路徑中獲取
    this.activatedRoute.paramMap.subscribe(params => {
      this.id = params.get('id');
    });

    this.activatedRoute.data.subscribe(({id,title}) => {

    });
}

snapshot: 參數快照，是一個路由信息的靜態快照，抓取自組件剛剛創建完畢之后，不會監聽路由信息的變化。如果確定一個組件不會從自身路由到自身的話，可以使用參數快照。

subscribe: 參數訂閱，相當于一個監聽器，會監聽路由信息的變化。

重定向路由

在用戶訪問一個特定的地址時，將其重定向到另一個指定的地址。
配置重定向路由：

// 當訪問根路徑時會重定向到 home 路徑
const appRoutes: Routes = [
  { path: '', redirectTo: 'home', pathMatch: 'full'},
  { path: 'home', component: HomeComponent}
];

子路由

子路由配置語法：

const appRoutes: Routes = [
  { 
    path: 'home', 
    component: HomeComponent,
    children: [
      { path: '', component: AComponent},
      { path: 'b', component: BComponent}
    ]
  },
];

輔助路由

輔助路由又兄弟路由，配置語法：

// 路由配置
{path: 'xxx', component: XxxComponent, outlet:'xxxlet'},
{path: 'yyy', component: XxxComponent, outlet:'yyylet'}

// 使用
<router-outlet></router-outlet>
<router-outlet name="xxxlet"></router-outlet>

// 鏈接
<a [routerLink]="['/home',{outlets:{xxxlet: 'xxx'}}]">Xxx</a>

當點擊Xxx鏈接時，主插座會顯示’/home’鏈接所對應的組件，而xxxlet插座會顯示xxx對應的組件。

路由守衛（guard）

CanActivate/CanActiveChild：處理導航到某路由的情況

當用戶不滿足這個守衛的要求時就不能到達指定路由。

export class DemoGuard1 implements CanActivate {

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
    ...
    return true;
  }
}
CanDeactivate：處理從當前路由離開的情況

如果不滿足這個守衛的要求就不能離開該路由。

// 泛型中 AComponent 代表要守衛的組件。
export class DemoGuard2 implements CanDeactivate<AComponent> {
 canDeactivate(component: AComponent): boolean {
   // 根據 component 的信息進行具體操作
   retturn true;
 }
}
Resolve：在路由激活之前獲取路由數據

在進入路由時就可以立刻把數據呈現給用戶。

@Injectable()
export AResolve implements Resolve<any> {
  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
     const id = route.paramMap.get('id');
     // 可以根據路由中的信息進行相關操作
  }
}

最后，需要將路由守衛添加到路由配置中：

const appRoutes: Routes = [
  { 
    path: 'common/a', 
    component: AComponent,
    canActivate: [DemoGurad1],
    canDeactivate: [DemoGuard2],
    resolve: {data: AResolve}
   },
  { path: 'common/b/:id', component: BComponent },
  { path: '**', component: NotFoundComponent}, // 定義通配符路由
];

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

以上是“Angular中Route路由的示例分析”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注創新互聯行業資訊頻道！

網站欄目：Angular中Route路由的示例分析
網站路徑：http://m.newbst.com/article14/jhecde.html

成都網站建設公司_創新互聯，為您提供網站設計、電子商務、動態網站、關鍵詞優化、網站設計公司、外貿網站建設

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯

外貿網站制作