JSS Angularサンプルアプリのプレースホルダーへのルーティング転送
このページの翻訳は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'
},
},
}
}