JSS Angularサンプルアプリのプレースホルダーへのルーティング転送

Version:

日本語翻訳に関する免責事項

このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。

プレースホルダーは、Sitecore JSSで構築されたアプリケーションに不可欠なコンポーネントです。例を示すために、このトピックではSitecore JSS Angularサンプルアプリケーションを使用します。

JSS Angularサンプルアプリケーションには、ルートプレースホルダーが付属しています。ルートプレースホルダはsrc/app/routing/layout/layout.component.htmlで定義されています。

sc-placeholderコンポーネントは、Sitecore JSS for Angularからインポートされます @sitecore-jss/sitecore-jss-angular。

<sc-placeholder name="jss-main" [rendering]="route" (loaded)="onPlaceholderLoaded($event)"></sc-placeholder><sc-placeholder name="jss-main" [rendering]="route"></sc-placeholder>

このルートプレースホルダーは、ルーターからのルートデータのレンダリングを処理します。

Angular sc-placeholderコンポーネントには、値jss-mainのname属性があり、jss-mainという名前のSitecoreプレースホルダーを表していることを示しています。プレースホルダは、プレースホルダコンポーネントのrendering入力にバインドされたデータで示されるように、ルートデータに基づいて1つ以上のコンポーネントをレンダリングします。

[rendering]="route"

ルートデータの出所をトレースし、src/app/routing/layout/layout.component.tsファイルでルート参照が挿入されていることを確認できます。

export class LayoutComponent implements OnInit, OnDestroy {
  route: RouteData;
  state: LayoutState;
  LayoutState = LayoutState;
  subscription: Subscription;
  errorContextData: LayoutServiceContextData;

  constructor(
    private activatedRoute: ActivatedRoute,
    private readonly meta: MetaService,
  ) { }
...
}

このルート参照には、ルート変更時に現在のルートデータをサブスクライブして受信できるdata観測可能が含まれています。

route: RouteData;

ngOnInit() {
  this.subscription = this.activatedRoute.data.subscribe((data: { jssState: JssState }) => {
    this.route = data.jssState.sitecore.route;
  }
}

sc-placeholderコンポーネントは、ルートプロパティ内のプレースホルダオブジェクトにアクセスできるため、一致するプレースホルダを名前で検索し、ルートデータ内のプレースホルダに定義されたコンポーネントの配列をレンダリングします。以下は、コンポーネントの実装の例です。sc-placeholderはレンダリング入力を自動的に設定します。

import { Component, Input } from '@angular/core';
import { ComponentRendering } from '@sitecore-jss/sitecore-jss-angular';

@Component({
  selector: 'app-welcome',
  templateUrl: './welcome.component.html',
})
export class WelcomeComponent {
  @Input() rendering: ComponentRendering;
}

renderingプロパティには、データフィールドなど、コンポーネントで使用可能なすべての情報が含まれます。

{
  componentName: 'Welcome',
  fields: {
    title: {
      value: 'Sitecore Experience Platform + JSS',
    },
    text: {
      value: '<p>...</p>',
    },
    logoImage: {
      value: {
        src: '/sitecore/assets/sc_logo.png',
        alt: 'Logo'
      },
    },
  }
}

この記事を改善するための提案がある場合は、お知らせください!