JSS for Angular APIリファレンス

Version:

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

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

JSS Angular SDKは、Sitecoreレイアウトサービスから返されたデータに基づいてコンポーネントとフィールドをレンダリングするのに役立つモジュール、コンポーネント、プレースホルダー、およびフィールドヘルパーディレクティブを提供します。

Angularモジュールへのコンポーネントの登録

SDK for Angularには、開発を支援するモジュール、コンポーネント、およびその他のユーティリティが付属しています。モジュールを作成するときに、JssModuleクラスが提供するwithComponentsメソッドを使用して、プレースホルダでレンダリングできるコンポーネントのリストにコンポーネントを追加できます。

import { JssModule } from '@sitecorelabs/sitecore-jss-angular';
import { WelcomeComponent } from './components/welcome/welcome.component';

@NgModule({
  ...
  declarations: [
    WelcomeComponent,
    ...
  ],
  imports: [
    JssModule.withComponents([
      { name: 'Welcome', type: WelcomeComponent }
    ])
  ],
  ...
})
export class FooModule { }

メモ

Angularサンプルアプリでは、JssModuleがインポートされ、規則に従って動的に生成され、コンポーネントはビルド時のディスク上の存在に基づいて登録されます。これにより、コンポーネント登録のメンテナンスが軽減されます。

プレースホルダーディレクティブ

JSS for Angularは、Layout Serviceによって返されるプレースホルダーをレンダリングするのに役立つコンポーネントを提供します。プレースホルダーコンポーネントは、レイアウトサービスデータで定義されたコンポーネントに基づいて、追加のAngularコンポーネントを動的にインスタンス化します。

基本的なプレースホルダー手法は、コンポーネントに挿入されたレンダリングデータを渡すことで構成されます。

<sc-placeholder name="jss-styleguide-layout" [rendering]="rendering"></sc-placeholder>

また、テンプレートを使用して各子コンポーネントの周囲で出力されるマークアップをカスタマイズするなど、高度な使い方も可能です。

<div class="row" sc-placeholder name="jss-reuse-example" [rendering]="rendering">
  <ng-template renderEach let-rendering="rendering">
    <div class="col-sm">
      <sc-render-component [rendering]="rendering"></sc-render-component>
    </div>
  </ng-template>
  <ng-template renderEmpty let-renderings="renderings">
    <div class="col-sm">
      <sc-placeholder [renderings]="renderings"></sc-placeholder>
    </div>
  </ng-template>
  <ng-template scPlaceholderLoading>
    <img src="loading.gif">
  </ng-template>
</div>

高度なプレースホルダー手法の詳細については、サンプルアプリのスタイルガイドのレイアウトの再利用の例を参照してください。

フィールドヘルパーディレクティブ

ライブラリは、Sitecoreフィールド値を出力するのに役立つ構造ディレクティブを提供します。構造ディレクティブを使用する利点は、開発者として、タグのすべての機能が使用可能であり、別のコンポーネント内にラップされないことです。エクスペリエンスエディター内で実行すると、マークされたタグは、フィールドが編集可能な場合に編集用の別の要素に置き換えられます。

たとえば、画像の編集を有効にするには、次のようにします。

<img *scImage="rendering.fields.logoImage" />

以下は、サポートされているすべての構造ディレクティブとその使用方法のリストです。

手記

次の例では、フィールドがプレースホルダーコンポーネントからのデータであると仮定します。