ホームページ >ウェブフロントエンド >jsチュートリアル >Angular ルーティングにおける遅延読み込み、ガード、動的パラメーターの簡単な分析

Angular ルーティングにおける遅延読み込み、ガード、動的パラメーターの簡単な分析

青灯夜游
青灯夜游転載
2021-07-01 11:05:592516ブラウズ

Angular ルーティングにおける遅延読み込み、ガード、動的パラメーターの簡単な分析

ルーティングは、URL リクエストを特定のコードにマッピングするメカニズムです。Web サイトのモジュール分割と情報アーキテクチャにおいて重要な役割を果たします。Angular のルーティング機能は非常に強力です。見てみましょう。 [関連チュートリアルの推奨事項: "angular チュートリアル"]

ルーティング遅延読み込み

Angularルートに従って、対応するモジュール コードを動的にロードできます。 , この関数は、パフォーマンスを最適化するための強力なツールです。

ホームページのレンダリング速度を高速化するために、次のルーティングを設計して、ホームページをできるだけシンプルかつ新鮮に保つことができます:

const routes: Routes = [
  {
    path: '',
    children: [
      {
        path: 'list',
        loadChildren: () => import('./components/list/list.module').then(m => m.ListModule),
      },
      {
        path: 'detail',
        loadChildren: () => import('./components/detail/detail.module').then(m => m.DetailModule),
      },
      ...
    ],
  },
];

ホームページには、いくつかの単純な静的要素のみがあります。一方、リスト、詳細、構成、その他のモジュールなどの他のページは、loadChildren を使用して動的にロードされます。

結果は次のとおりです:

Angular ルーティングにおける遅延読み込み、ガード、動的パラメーターの簡単な分析

components-list-list-module-ngfactory.js ファイルにのみアクセスできます。 when /list はルーティング時にのみロードされます。

ルート ガード

ルートにアクセスしたり切り替えたりすると、対応するモジュールとコンポーネントがロードされます。ルート ガードは、ルートのロード前後のフックとして理解できます。最も一般的なのはガードです。

  • canActivate ガードに入る
  • canDeactivate ガードを離れる

たとえば、次のようにしたいとします。詳細ページに入る前にユーザーがアクセス権を持っているかどうかを判断するには、canActivate ガードを使用できます。

ルーティング ガードの追加

{
  path: 'detail',
  loadChildren: () => import('./components/detail/detail.module').then(m => m.DetailModule),

  // 路由守卫
  canActivate: [AuthGuard],
},

ガード ロジックの作成

CLI コマンドを使用してルーティング ガード モジュールを作成します:

ng g guard auth

auth.guard.ts

import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, UrlTree } from '@angular/router';
import { Observable } from 'rxjs';
import { DetailService } from './detail.service';

@Injectable({
  providedIn: 'root'
})
export class AuthGuard implements CanActivate {
  constructor(
    private detailService: DetailService,
  ) {}

  canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
    return new Observable(observer => {
      // 鉴权数据从后台接口异步获取
      this.detailService.getDetailAuth().subscribe((hasPermission: boolean) => {
        observer.next(hasPermission);
        observer.complete();
      });
    });
  }
}

権限サービスの取得

権限サービスの取得:

ng g s detail

detail.service.ts

import {Injectable} from &#39;@angular/core&#39;;
import { HttpClient } from &#39;@angular/common/http&#39;;

@Injectable({ providedIn: &#39;root&#39; })
export class DetailService {
  constructor(
    private http: HttpClient,
  ) { }

  getDetailAuth(): any {
    return this.http.get(&#39;/detail/auth&#39;);
  }
}

効果は次のとおりです:

Angular ルーティングにおける遅延読み込み、ガード、動的パラメーターの簡単な分析

/detail ルートにガードを追加したため、他のルートから /detail ルートに切り替える場合でも、/ に直接アクセスする場合でも、ガードを追加しました。詳細ルート、このページにアクセスできません。

動的ルーティング パラメータ

ルーティングにパラメータを導入するには、さまざまな方法があります。

  • パスにパラメータを使用する
  • クエリ文字列にパラメータを使用する
  • リンク経由のパラメータなし

パスにパラメータあり

{
  path: &#39;user/:id&#39;,
  loadChildren: () => import(&#39;./components/user/user.module&#39;).then(m => m.UserModule),
},

クエリ文字列にパラメータあり

htmlパラメータの受け渡し

<a [routerLink]="[&#39;/list&#39;]" [queryParams]="{id: &#39;1&#39;}">...</a>

ts パラメータの受け渡し

this.router.navigate([&#39;/list&#39;],{ queryParams: { id: &#39;1&#39; });

データを介して静的パラメータを渡す

注: データを介して渡されるルーティング パラメータは静的のみ可能です

{
  path: &#39;detail&#39;,
  loadChildren: () => import(&#39;./components/detail/detail.module&#39;).then(m => m.DetailModule),
  
  // 静态参数
  data: {
    title: &#39;详情&#39;
  }
},

resolve を介して動的パラメータを渡す

dataは静的パラメータしか渡せないので、バックグラウンドインターフェースから取得した動的パラメータをルーティングで渡したいのですがどうすればよいでしょうか?

答えは、resolve 構成によって決まります。

{
  path: &#39;detail&#39;,
  loadChildren: () => import(&#39;./components/detail/detail.module&#39;).then(m => m.DetailModule),
  
  // 动态路由参数
  resolve: {
    detail: DetailResolver
  },
},

リゾルバーの作成

detail.resolver.ts

import { Injectable } from &#39;@angular/core&#39;;
import { Resolve, ActivatedRouteSnapshot, RouterStateSnapshot } from &#39;@angular/router&#39;;
import { DetailService } from &#39;./detail.service&#39;;

@Injectable({ providedIn: &#39;root&#39; })
export class DetailResolver implements Resolve<any> {

  constructor(private detailService: DetailService) { }

  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): any {
    return this.detailService.getDetail();
  }
}

サービスの詳細データを取得するメソッドを追加

detail.service.ts

import {Injectable} from &#39;@angular/core&#39;;
import { HttpClient } from &#39;@angular/common/http&#39;;

@Injectable({ providedIn: &#39;root&#39; })
export class DetailService {
  constructor(
    private http: HttpClient,
  ) { }

  getDetailAuth(): any {
    return this.http.get(&#39;/detail/auth&#39;);
  }

  // 增加的
  getDetail(): any {
    return this.http.get(&#39;/detail&#39;);
  }
}

動的パラメータの取得

コンポーネントの作成

ng g c detial

detail.component.ts

import { Component, OnInit } from &#39;@angular/core&#39;;
import { ActivatedRoute } from &#39;@angular/router&#39;;

@Component({
  selector: &#39;app-detail&#39;,
  templateUrl: &#39;./detail.component.html&#39;,
  styleUrls: [&#39;./detail.component.scss&#39;]
})
export class DetailComponent implements OnInit {

  constructor(
    private route: ActivatedRoute,
  ) { }

  ngOnInit(): void {
    // 和获取静态参数的方式是一样的
    const detail = this.route.snapshot.data.detail;
    console.log(&#39;detail:&#39;, detail);
  }

}

プログラミング関連の知識の詳細については、次を参照してください: プログラミング ビデオ# ##! !

以上がAngular ルーティングにおける遅延読み込み、ガード、動的パラメーターの簡単な分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事はjuejin.cnで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。