SAP e コマース クラウド スパルタカス UI の Router モジュールの forRoot メソッドについて

デフォルト ルートの構成データは、次のdefault-routing-config.tsファイル。

いくつかの例:

login: {
    
    
    paths: ['login'],
    protected: false,
    authFlow: true,
  },
  register: {
    
    
    paths: ['login/register'],
    protected: false,
    authFlow: true,
  },

RoutingModule の forRoot メソッド:

webpack.require が呼び出されると、 forRoot メソッドがトリガーされます。

  • RoutingModule:projects\core\src\routing\routing.module.ts - 初期化された構成可能なルート
  • RoutingModule: projects\storefrontlib\cms-structure\routing\routing.module.ts - デフォルトのルート構成を提供します
  • AppRoutingModule:projects\storefrontlib\router\app-routing.module.ts:

AppModule にインポートしない場合AppRoutingModule:

Spartacus はロードを完了できませんでした。これはNo provider for Router、 のエラー メッセージが明確であるためです。

AppRoutingModule に注釈が付けられた後@angular/routerRouterModuleにインポートAppModuleされ。

スパルタカス Router.config の値を出力します。

プリントアウトは、このすべての一般的な構成です。

ルーティング パスをカスタマイズします。

provideConfig(<RoutingConfig>{
    
    
      // custom routing configuration for e2e testing
      routing: {
    
    
        routes: {
    
    
          product: {
    
    
            paths: ['product/jerry/:productCode/:name', 'product/:productCode'],
            paramsMapping: {
    
     name: 'slug' },
          },
        },
      },
    }),

カスタマイズされた効果:

http://localhost:4000/electronics-spa/en/USD/product/jerry/816379/dt-16-80mm-f3.5-4.5

これらの Spartacus のデフォルトのルーティング設定は、Commerce Cloud バックエンド CMS のページのラベル フィールドに対応しています。

Angular は forRoot メソッドを通じてシングルトン サービスの実装を提供します。いわゆるシングルトン サービスは、アプリケーション内にインスタンスを 1 つだけ持つサービスです。

Angular でサービスをシングルトンにする方法は 2 つあります。

  • @Injectable() の providedIn プロパティをroot

As of Angular 6.0, the preferred way to create a singleton service is on the @Injectable() decorator implemented by the Service, providedInsetting to root. これにより、アプリケーションのルート ディレクトリにサービス インスタンスを提供するように Angular DI フレームワークに指示されます。

以下は、SAP E-Commerce Cloud スパルタカス UI のシングルトン サービスの例です。

  • AppModule または AppModule によってインポートされたモジュールにサービスを含める

Angular 6.0 より前は、NgModule の providers 配列にサービスをインポートする必要がありました。

@NgModule({
    
    
  …
  providers: [UserService],})

UserService をインポートする NgModule がルート AppModule である場合、UserService はシングルトンになり、アプリケーション全体で利用可能になります。この方法は理論的には可能ですが、Angular 6.0 以降では、Angular はサービス実装ファイルで@Injectable()decorator、この方法で取得したサービスのみが Tree Shaking 最適化をサポートすることを推奨しています。

おすすめ

転載: blog.csdn.net/i042416/article/details/126415716