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

プレースホルダーは 、Sitecore JSSで構築されたあらゆるアプリケーションにおいて重要なコンポーネントです。例として、このトピックではSitecore JSS Angularサンプルアプリケーションを使用します。

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

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

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

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

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; }

レンダリングプロパティには、コンポーネントで利用可能なすべての情報が含まれており、データフィールドも含まれます。

{ componentName: 'Welcome', fields: { title: { value: 'Sitecore Experience Platform + JSS', }, text: { value: '

...