Angular 研究ノートの 6 つの理由

Angular ルーティングの公式ウェブサイト

1. すぐに始めましょう

• ルーティングはモジュールに基づいており、各モジュールは独自のルートを持つことができます。各ルートはコンポーネントに対応します。
• モジュールでは、ルーティング機能を提供するRouterModuleモジュールを導入する必要があります。RouterModuleそして、表示する必要があるコンポーネントを導入して宣言する必要があります

...
import {
    
    RouterModule} from "@angular/router";
import {
    
     HomeComponent } from './pages/home/home.component';
import {
    
     AboutComponent } from './pages/about/about.component';
@NgModule({
    
    
    // 声明当前模块拥有哪些组件
    declarations: [
        AppComponent, // 根组件
        HomeComponent,
        AboutComponent,
    ],
    ...
})

• ルーティング ルールを定義し、現在のモジュールがルーティング モジュールに依存していることを宣言します。同時に、ルーティング ルールをルーティング モジュールに渡す必要があります。
• RouterModule.forRootこのメソッドは、ルートを定義するために使用されます。このメソッドにより、アプリケーションは 1 つのみをインスタンス化します。RouterModule最初のパラメータはオブジェクト配列です。オブジェクトは通常、pathアドレス バーのパスと、componentパスに従って動的にロードされるコンポーネントを表す 2 つの属性で構成されます; 2 番目のパラメータは Configuration オブジェクトで、ルーティングの代わりにルーティングをuseHash:true使用することを示します。hashhistory

...
// path开头不需要加斜线
const routes = [
    {
    
    path: 'home', component: HomeComponent},
    {
    
    path: 'about', component: AboutComponent},
];
...
@NgModule({
    
    
    ...
    imports: [BrowserModule, RouterModule.forRoot(routes, {
    
    useHash: true})],
    ...
})

• モジュールのルート コンポーネントでルーティング ジャンプ リンク (スラッシュを追加する必要があります) とルーティング ソケット (プレースホルダー) を定義します。
• routerLinkAngularは、定義したルートをテンプレート ファイルに接続する組み込みディレクティブです。

<a routerLink="/home">首页</a>  |
<a routerLink="/about">关于</a>
<router-outlet></router-outlet>

• これら 2 つのaリンクをクリックすると、urlアドレスによって表示されるコンテンツとルーティング ソケットの場所がそれに応じて変化します。
  

2. マッチングルール

(1) リダイレクト

• アドレスバーにルートアドレスがない場合にhomeルートにリダイレクトします
• デフォルトでは、Angularルーティング ルールに一致する場合、プレフィックスが一致します。path空の場合は、プレフィックス '/' を持つルーティング接続と一致するため、pathMatch:'full'ルーティング ルールが完全に一致することを示すために追加する必要があります。

const routes:Routes = [
    {
    
    path: 'home', component: HomeComponent},
    {
    
    path: 'about', component: AboutComponent},
    {
    
    path: '', redirectTo: 'home', pathMatch: 'full'}
];

(2) 404ページ

• ルーティング ルールは上から下に一致します。すべてのルートが一致しない場合は、404 ページを表示する必要があります。
• **これはワイルドカード文字であり、すべてのルートに一致するため、配列の最後に配置する必要があります。

const routes:Routes = [
    {
    
    path: 'home', component: HomeComponent},
    {
    
    path: 'about', component: AboutComponent},
    {
    
    path: '', redirectTo: 'home', pathMatch: 'full'},
    {
    
    path: '**', component: NotFoundComponent}
];

3. ルーティングパラメータ

(1) クエリパラメータ

• ルーティング接続を定義する場合、クエリ パラメーターは[queryParams]動的バインディングを使用します

<a routerLink="/about" [queryParams]="{name:'zs'}">关于</a>

• 対応するコンポーネントが動的にレンダリングされる場合、渡されたパラメータはコンポーネント内で取得できます。
• ActivatedRoute動的にロードされるコンポーネントに対応するルーティング情報にアクセスするために使用されます。
• route.queryParamMapObservableクエリパラメータ情報を保存するオブジェクトです。getメソッドを使用して対応する値を取得できます。

import {
    
    ActivatedRoute} from '@angular/router';
export class AboutComponent {
    
    
    constructor(private route: ActivatedRoute) {
    
    }
    ngOnInit() {
    
    
        this.route.queryParamMap.subscribe(query => {
    
    
            console.log(query.get('name'));
        })
    }
}

(2) 動的パラメータ

• path動的パラメータは、ルーティング ルールの属性内でパラメータの位置を予約する必要があります。

{
    
    path: 'about/:name/:age', component: AboutComponent},

• コンポーネント テンプレートは、routerLink動的配列をバインドし、パスとパラメーター リストを順番に渡す必要があります。

<a [routerLink]="['/about','zhangsan',78]">关于</a>

• オブジェクトコンポーネントでは、ActivatedRouteインスタンスオブジェクトを通じてparamMap動的パラメータ情報を取得します。
  

4. サブレベルルーティング

ルートを定義する場合、childrenルートの属性を通じてサブレベルのルートを定義できます。

{
    
    
     path: 'about',
     component: AboutComponent,
     children: [
         {
    
    path: 'company', component: CompanyComponent},
         {
    
    path: 'industry', component: IndustryComponent},
     ]
 },

親ページでAboutComponent、子ルートのジャンプ リンクを定義し、子ルートのルーティング ソケットを定義します。

<a routerLink="/about/company">公司</a>
<a routerLink="/about/industry">行业</a>
<router-outlet></router-outlet>

5. ナビゲーションルーティング

ナビゲーションルーティングでは、子ルーティング以外のパスへのページジャンプを実現できます。

<button (click)="goHome()">点击跳转到首页</button>

// 需要引入Router模块
constructor(private router: Router) {
    
    }
goHome() {
    
    
	// 查询参数
    this.router.navigate(['/home'],{
    
    
        queryParams: {
    
    
            name: 'zhangsan'
        }
    })
    // 动态参数
   // this.router.navigate(['/home','zhangsan'])
}

6. ルーティングモジュール

ルーティングの定義に関連するコードを抽出し、管理用に別のモジュールに配置します。

1. ルート パスの下にモジュールを定義しますng g m route --flat=true。--flat=trueフォルダーは作成されませんが、src/app関連ファイルは現在のプロジェクトの直下に作成されます。デフォルト値は次のとおりです。false
2. ルーティング ルールを定義するコードをモジュール クラスに配置します。
3. モジュールクラスにルートを定義してエクスポートするRouterModule

  imports: [
    CommonModule,
    RouterModule.forRoot(routes, {
    
    useHash: true})
  ],
  exports: [RouterModule]

4. 定義されたルーティング モジュールを AppModule にインポートします

imports: [BrowserModule,RouteModule],

7. ルーティングモジュールの遅延ロード

ルーティング モジュールの遅延読み込みにより、ユーザーは初めてアプリケーションをリクエストするときにルート モジュールのみをリクエストでき、ユーザーがアプリケーションにアクセスするときに他のモジュールがロードされるため、ユーザー エクスペリエンスが最適化されます。

1. 遅延ロード モジュールを作成します。モジュールの作成中にそれを使用します--routing=true。これは、angular-cliモジュールのルーティング モジュールを作成するのに直接役立ちます。

ng g m sports --routing=true

2. モジュールのルートコンポーネントを作成する

ng g c sports

3. ルーティング モジュールでルーティングを定義するsports; フィーチャー モジュールでルーティングを定義してそれを使用するRouterModule.forChildパラメータとして受け入れられるルーティング構成配列は 1 つだけです。

import {
    
    SportsComponent} from "./sports.component";

const routes: Routes = [
  {
    
    path: '', component: SportsComponent},
];

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

4. ルート ルーティング モジュールのルーティング ルールで、この機能モジュールのロード ルールを定義します。
   ルーティング アドレスが の場合、モジュールを/sport動的にロードします。sport

{
    
    path: 'sports', loadChildren: () => import('./sports/sports.module').then(m => m.SportsModule)},

5. ルートコンポーネントテンプレートでジャンプリンクを定義する

<a routerLink="/sports">运动界面</a>

コンソールからは、sourcesスポーツ インターフェイスのボタンをクリックすると、sportsモジュールが動的にロードされることがわかります。

8.ルートガード

ルート ガードは、要求されたルートへのナビゲーションが許可されているかどうかをルートに伝えます。
ルート ガードの戻り値には、次の 4 つの状況があります。

1. ブール値:trueアクティブ化できることを示す、falseアクティブ化できないことを示す
2. UrlTree:Url新しいツリーにリダイレクトできるツリーを表します。Url
3. async を返すことができます。ブール値またはツリーPromise<boolean | UrlTree>として解析できる Promise を表します。Url
4. を返すことができます: ブール値またはツリーObservable<boolean | UrlTree>として解析できる監視可能なオブジェクトを表しますUrl

(1) キャンアクティベート

CanActivateこれはインターフェイスです。ルーティング ガード クラスをカスタマイズする必要があり、ルーティング ガード クラスはこのインターフェイスを実装する必要があります。canActivateこのインターフェイスは、ルートへのアクセスを許可するかどうかを決定するメソッドがクラスに必要であることを規定しています。ルートには複数のガードを適用できます。すべてのガードが許可されている場合にのみ、ルートにアクセスできます。

1. ルート ガード クラスを作成し、ルート ガード メソッドを配置します。ng g guard guards/authGuard
2. Angular-cliいくつかの基本的なコードが作成されますが、このメソッドでは、ターゲット ルートへのアクセスが許可されていないことを示すために、canActivate直接 を返します。false

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

// 被Injectable修饰，说明路由守卫类是一个服务类
@Injectable({
    
    
    providedIn: 'root'
})
// AuthGuardGuard:路由守卫类
export class AuthGuardGuard implements CanActivate {
    
    
    // canActivate:路由守卫方法
    // 参数：
    // route:ActivatedRouteSnapshot:路由快照，包含与当前组件相关的路由的当前瞬间信息。
    // state:RouterStateSnapshot:路由状态快照，表示路由器在当前瞬间的状态
    canActivate(
        route: ActivatedRouteSnapshot,
        state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
    
    
        return false;
    }
}

3. ルーティング ルールの対応するルートにルート ガードを適用します。

{
    
    
    path: 'user',
    loadChildren: () => import('./user/user.module').then(m => m.UserModule),
    canActivate: [AuthGuardGuard]
},

（二）CanActivateChild

特定のルートの子ルートにアクセスできるか確認する

1. ルーティング ガード クラスを作成し ng g guard about/about、選択しますCanActivateChild
2. canActivateChildメソッドの戻り値を次のように変更します。false
3. このガードを対応するルートに適用すると、aboutルートの 2 つのサブルートを無効にできます。

{
    
    
    path: 'about',
    component: AboutComponent,
    children: [
        {
    
    path: 'company', component: CompanyComponent},
        {
    
    path: 'industry', component: IndustryComponent}
    ],
    canActivateChild: [AboutGuard]
},

4. これら 2 つのジャンプ リンクをクリックしても、ページはジャンプしません。
   

（3）無効化できる

ユーザーが現在のルートから離れることができるかどうかの検出は、ユーザーがフォーム項目に入力して保存する前に離れるシナリオで使用できます。
ルートを離れることができるかどうかは、ルート ガードが現在適用されているコンポーネントによって異なります。このルート ガードを使用するコンポーネント クラスは、同じ名前のメソッドを定義して、ルート ガードに現在のページを離れることができるかどうかを通知する必要があります。このメソッドは、戻り値を決定するためにルート ガード内で呼び出されます。

1. ルート ガード クラスの作成ng g guard unsave/unsave
2. ルートガードクラスには、ルートガードに適用するコンポーネントに定義する必要がある判定機能の種類を指定するインターフェースを定義します。このメソッドではcanDeactivate、戻り値はコンポーネントの判定機能に基づいて決定され、戻る場合trueは現在のルートからの離脱が許可されることを意味し、戻る場合falseは離脱が許可されないことを意味します。

export interface CanLeave {
    
    
    canLeave: () => boolean;
}

export class UnsaveGuard implements CanDeactivate<unknown> {
    
    
    canDeactivate(
        component: unknown,
        currentRoute: ActivatedRouteSnapshot,
        currentState: RouterStateSnapshot,
        nextState?: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
    
    
        // @ts-ignore
        if (component.canLeave()) {
    
    
            return true;
        } else {
    
    
            if(confirm("是否离开当前页面？")){
    
    
                return true;
            }else{
    
    
                return false;
            }
        }
    }
}

3. ルートが定義されている対応するルートにルート ガードを追加します。

{
    
    
    path: 'home/:username',
    component: HomeComponent,
    canDeactivate: [UnsaveGuard]
},

4. HomeComponentコンポーネント クラスでは、CanLeaveインターフェイスを実装し、現在のルートが終了できるかどうかをルーティング ガードに伝える値をcanleave返すメソッドを定義する必要があります。boolean

export class HomeComponent implements CanLeave{
    
    
    canLeave(): boolean {
    
    
        return false;
    }
}

5. ホームページを離れるときにポップアップ ウィンドウが表示されます。[OK] をクリックして終了し、[ルート ジャンプのブロックを解除] をクリックします。

(4) 解決

ルートにジャンプする前に非同期操作を実行してデータを取得し、非同期操作が完了した後にルートジャンプを実行します。

1. Resolveルーティング ガード クラスを作成します ng g resolver resolvers/username。Resolve クラスもサービス クラスです。
2. resolveメソッド内で 1 つを返しPromise、必要なデータを非同期で取得して返します

resolve(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
): Promise<String> {
    
    
    return new Promise<String>((resolve, reject) => {
    
    
        setTimeout(() => {
    
    
            resolve("张三");
        }, 2000);
    })
}

3. このルーティング ガードを対応するルートに適用し、ルーティング ルール定義にresolve属性を追加します。この属性は配列であり、keyコンポーネントに追加される属性であり、value対応するデータを取得するルート ガードを指します。

{
    
    
    path: 'home/:username',
    component: HomeComponent,
    resolve: {
    
    
        username: UsernameResolver
    }
},

4. コンポーネントでは、this.route.snapshot.dataルーティング ガードによって渡されたデータを属性を通じて取得できます。

constructor(private route: ActivatedRoute) {
    
    
}
ngOnInit(): void {
    
    
    console.log(this.route.snapshot.data['username'])
}

5. ボタンをクリックしてホームページに移動します。ジャンプは 2 秒後に行われ、コンソール出力が表示されます。