---
title: "JSS Angularサンプルアプリ内のプレースホルダーへのルーティング転送"
slug: "routing-transfer-to-placeholders-in-the-jss-angular-sample-app"
abstract: "ルーターからのルートデータのレンダリング処理をルートプレースホルダーが扱う方法を説明しています"
---
# JSS Angularサンプルアプリ内のプレースホルダーへのルーティング転送

[プレースホルダーは](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/introducing-placeholders-in-jss-apps.html "Introducing placeholders in JSS apps") 、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)"></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;
}

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

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