AOPルーティングライブラリを用いた角度移動の新しい方法

この記事はもともとメディアに掲載されていますThe AOP-Routing library for Angular
驚くべき新しいNPMライブラリがありますaop-routing それは向上し、角度のアプリケーションでナビゲーションとルーティングにきちんとした機能の多くをもたらします.

AOPルーティングとは何か
AOPルーティングは実行する機能を提供しますImperative and Popstate navigation 角ルータのオブジェクトを注入またはインポートする必要がなく、型スクリプトのデコレータの容易さを通しての操作.
それを合計するには、AOPルーティングライブラリを使用すると、コンポーネントの間にルータオブジェクトをインポートまたは注入することなく、コンポーネント間のナビゲーションを実行することができます.また、実行時にルーティングテーブルを動的に更新するなどの他のきちんとした機能も提供します.ナビゲーションを実行するには、メソッドの上部には、デコレーターを置くように簡単です!

以下はAOPルーティングが提供する機能のリストです.

デコレータを用いた命令ナビゲーション

デコレータを使用したPopstateナビゲーション

デフォルトナビゲーションロジックをオーバーライドするカスタムナビゲーションロジック

動的にルーティングテーブルに新しいパスを追加する

動的にパスのコンポーネントを変更する

動的に追加/削除する

どのようにインストールすることができますし、我々のアプリケーションにこのライブラリを統合を参照してみましょう

- Note: The aop-library requires angular version 8.1 or higher to be installed!

AOPルーティングライブラリを角度アプリケーションにインストールします
NPMのインストール

npm install aop-routing

ライブラリをインストールした後、アプリケーションのトップレベル/ルートモジュールインポート配列にAoProUgingModuleを追加します.

imports: [
   ...
    AopRoutingModule
  ]

AopNavigationService依存性をトップレベル/ルートモジュールのコンストラクターに追加します.

export class AppModule {
  constructor(private navigationService: AopNavigationService) {}
 }

これは、AOPルーティングライブラリをアングルアプリケーションに統合するために必要なことです.
今どのように我々はAOPルーティングライブラリを使用することができます参照してください、それはクールな機能です!
私は、機能を示すために以下のルーティングテーブルを使用しています

const routes: Routes = [
{path: 'page1', component: Page1Component, canActivate: [TestGuard,]},
{path: 'page2', component: Page2Component },
{path: 'page3', component: Page3Component }
];

次のページへのルーティング
AOPルーティングライブラリを使用すると、次のページまたはコンポーネントにルートを設定する必要がある場合は、ナビゲーションを実行する関数の上にRoutenext ()デコレータを使用するのと同じくらい簡単です.
以下の例は、TestMethod 1の実行終了時にPage 2へのルートです.

import { Component} from '@angular/core';
@Component({
...
})
export class Page1Component {
constructor() {}
@RouteNext('page2')
public testMethod1() {
...some logic...
 }
}

ナビゲーションが動的データに基づいている場合、このメソッドは' String 'または' aopNavigator 'オブジェクトを返します.デコレータはルーティング値を使用してルーティングを実行します.

//Routing dynamically with RouteNext Decorator by returning a string
import { Component} from '@angular/core';
@Component({
...
})
export class Page1Component {
constructor() {}
@RouteNext()
public testMethod1(): string {
...some logic...
return 'page2';
 }
}
-----------------------------------------------------------------
// Routing dynamically with RouteNext Decorator by returning an 
// AopNavigator
import { Component} from '@angular/core';
@Component({
...
})
export class Page1Component {
constructor() {}
@RouteNext()
public testMethod1(): string {
  ...some logic...
  const obj: AopNavigator = {
     destinationPage: 'Test2',
   };
  return obj;
 }
}

AOPルーティングはまた、非同期メソッドで使用することができますasync︵︶RoutenExcasync︶の接尾辞を持つ装飾子を持っています.

// The RouteNextAsync decorator will route to page2 by subscribing // to testMethod1 and using it's string value to perform the routing
@RouteNextAsync()
public testMethod1(): Observable<string> {
  ...some logic...
  return of(1, 2, 3).pipe(
   switchMap(x => {
     return of('page2');
   })
 );
}
----------------------------------------------------------------
// The RouteNextAsync decorator will route to page2 by subscribing // to testMethod1 and using the returned AopNavigator object value // to perform the routing
@RouteNextAsync()
public testMethod1(): Observable<AopNavigator> {
  ...some logic...

   const obj: AopNavigator = {
    destinationPage: 'Test2',
  };

  return of(1, 2, 3).pipe(
   switchMap(x => {
     return of(obj);
   })
 );
}

バックナビゲーション
以前のページにpopstateナビゲーションを実行するために使用することができます.

//testMethod1 will navigate back to previous page after execution
@RouteBack()
public testMethod1() {
 ...some logic...
}
------------------------------------------------------------------- 
//Will navigate to the previous page after the asynchronous //execution of testMethod1
@RouteBackAsync()
public testMethod1() {
 return of(...some async operations).pipe(
 ...rxjs operators...)
}

ブラウザの履歴の特定の状態に移動する
AOPルーティングライブラリはまた、RooteToStateとRouteToStateSyncデコレータを使用して、ブラウザの履歴内の特定の状態へのルートにPopStateナビゲーションを使用する機能を提供します.

// Will traverse 2 states backwards of the browser history state 
// equivalent to hitting the browser back button twice
@RouteToState(-2)
public testMethod1() {
 ...some logic...
}
------------------------------------------------------------------
// Will traverse 2 states forward of the browser history state
@RouteToState(2)
public testMethod1() {
 ...some logic...
}
------------------------------------------------------------------
// Will subscribe to the targeted method and use the returned value to traverse 2 states backwards of the browser history state after end of targetted method.
@RouteToStateAsync()
public testMethod1(): Observable<number> {
  ...some logic...
  return of(1, 2, 3).pipe(
   switchMap(x => {
     return of(-2);
   })
 );
}
------------------------------------------------------------------
// Will make the decorator subscribe to the AopNavigator object returned from the targetted method and use the destinationPage property value to perform popstate navigation traversal of the browser history state.
@RouteToStateAsync()
public testMethod1(): Observable<AopNavigator> {
  ...some logic...

   const obj: AopNavigator = {
    destinationPage: -2',
  };

  return of(1, 2, 3).pipe(
   switchMap(x => {
     return of(obj);
   })
 );
}

AopNavigatorインターフェイスは、AOPルーティングナビゲーションを強化するために使用できる他のオプションのプロパティを持っています.
DestinationPage :このプロパティは、Routenext、RoutenToSync、RouteToState、およびRouteToStateSyncデコレータに使用できる文字列または数値を渡してナビゲーションを実行できます.
NavigationExtra :このプロパティは、RentenextおよびRoutenExcasyncデコレータのルータナビゲーション戦略を変更するための追加のオプションを許可するように、角NavigationExextrasオブジェクトを受け取ります.
プリプロセス:このプロパティは参照関数を受け取ります.この関数は、デコレータが実行するナビゲーションの前に実行されます.
Param :このプロパティは、プリプロセスプロパティ内の渡された関数のパラメーターとして使用できる任意の型の値を取得します.

カスタムロジック
あなたがナビゲーションのより細かい制御を望むならば、これもできます.AOPルーティングライブラリは、ユーザーが既定のナビゲーションロジックをオーバーライドする独自のカスタム実装を提供する機能を提供します.
これは3ステップと同じくらい簡単に達成することができます.

AOPBaseNavigation抽象クラスを拡張するクラスを作成します.

export class SampleClass extends AopBaseNavigation {}

AOPBaseNavigation抽象クラスの必須抽象メソッドを実装します.

gotonextpage ()

GotoPrevioSpan ()

gotostat ()

export class SampleClass extends AopBaseNavigation {
 public goToNextPage(...) {
  ...custom logic...
}


 public goToPreviousPage(...) {
  ...custom logic...
}

 public goToState(...) {
  ...custom logic...
}

トップレベル/ルートモジュールでは、AppProxyNavigationServiceをプロバイダー配列に追加し、usClassを新しく作成したクラスに設定します

@NgModule({
  imports: [
    ...
    AopRoutingModule
  ],
  providers: [{provide: AopProxyNavigationService, useClass: SampleClass}],
})

SampleClassはデフォルトのナビゲーションロジックをオーバーライドします.したがって、デコレータはデフォルトロジックの代わりにSampleClassのメソッドを呼び出します.

ダイナミックチェンジ
AOPルーティングライブラリの最もクールな機能の1つは、アプリケーションの実行時にルーティングテーブルを変更する機能です.
注:ドキュメントページには、以下の機能がまだ実験段階にあります.
実験機能を有効にするには、RootメソッドのAoProUgingModuleにトップレベル/ルートモジュールをtrueに設定して、ObjectNavNameプロパティをtrueに設定してオブジェクトを渡す必要があります.

@NgModule({
  ...
  imports: [
    ...
    AopRoutingModule.forRoot({expirementNav: true})
  ],
  ...
})

ルーティングテーブルへの新しいパスを追加します.
シナリオ:アプリケーションの実行時に、特定のフローについては、アプリケーションの新しいルートパスオブジェクトを追加して移動します.我々は、AOPルーティングライブラリを使用して、上記のルーティングテーブルにアプリケーションの実行中に新しいパスを追加するつもりです.
パスはPage 4で、Page 4 Componentへのルートです.

RouteTransformオブジェクトを作成し、「パス」および「コンポーネント」プロパティーを設定します.

const routeTransform: RouteTransform = {
    path: 'page4',
    component: Page4Component
 };

Targetted関数のRoutenextまたはRoutenExamerCの呼び出し元で、RouteTransformプロパティセットを使用してAOPNAVオブジェクトを返します.

// aop-routing library will use this object and add this new path to
// the routing table at run time and navigate to it.
@RouteNext()
public testMethod() {
  const routeTransform: RouteTransform = {
    path: 'page4',
    component: Page4Component
 };
  return {routeTransform}
}

実行時にパスのコンポーネントを変更する
AOPルーティングでは、実行時に既存のパスのコンポーネントを変更することもできます.前のセクションのルーティングテーブルからリコールします.
ランタイムでコンポーネントを変更し、代わりにPage 4 Componentに移動したいとします.

// aop-routing will override the default component(Page1Componet)  // set for page1 path and instead set attach Page4Component to 
// page1
@RouteNext()
public testMethod() {
  const routeTransform: RouteTransform = {
    path: 'page1',
    component: Page4Component
 };
  return {routeTransform}
}

実行時にガードをガードする
また、実行時にルートパスにカンニング名ガードを追加することもできます
以下に例を示します.

@RouteNext()
public testMethod() {
  const routeTransform: RouteTransform = {
    path: 'page2',
    canActivateGuards: [guard1, guard2]
 };
  return {routeTransform}
} 

実行時にCanactivate Guardを削除する
Canactivateガードも、実行時にルートパスから削除できます.上記と同じコードです.AOPルーティングライブラリは、ガードテーブルがルーティングテーブルに存在する場合、検出および削除することができます.

実行時にすべてのCanactivateガードを無効にする
パスに関連付けられているすべてのカンニング名ガードを削除するには、ガードを追加するのと同じ手順です.代わりにCanActivateGuardプロパティを空の配列に設定する必要があります.

@RouteNext()
public testMethod() {
  const routeTransform: RouteTransform = {
    path: 'page1',
    canActivateGuards: []
 };
  return {routeTransform}}

注意:ルーティングテーブルに対する変更は永続化されません.ルーティングテーブルは、ナビゲーションの後に元の状態に戻される.
AOPルーティングライブラリは大幅に強化され、また、角度の開発者のためのナビゲーションが容易に優れたツールです.
AOPルーティングライブラリを使用しましたか?コメントを下に私の考えを聞かせ!