Angular API参照のためのJSS
このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。
JSS Angular SDKは、Sitecoreレイアウト サービスから返されるデータに基づいてコンポーネントやフィールドをレンダリングするためのモジュール、コンポーネント、プレースホルダー、フィールドヘルパー指令を提供します。
Angularモジュールにおけるコンポーネントのレジスタ
AngularのSDKには、開発を支援するモジュール、コンポーネント、その他のユーティリティが含まれています。モジュールを作成する際、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がインポートされ、通常に動的に生成され、構成時のディスク上の存在に基づいてコンポーネントが登録されます。これによりコンポーネント登録のメンテナンスが軽減されます。
プレースホルダー指令
Angular用のJSSは、レイアウトサービスから返されるプレースホルダーをレンダリングするのに役立つコンポーネントを提供します。プレースホルダーコンポーネントは、レイアウトサービスデータで定義されたコンポーネントに基づいて、追加のAngularコンポーネントを動的にインスタンス化します。
基本的なプレースホルダー技術は、コンポーネントに注入されたレンダリングデータを渡すことです:
さらに高度な利用も可能で、テンプレートを使って各子コンポーネントの周囲に出力されるマークアップをカスタマイズできます:
高度なプレースホルダー技術の詳細については、サンプルアプリのスタイルガイドにあるレイアウト再利用例をご覧ください。
フィールドヘルパー指令
このライブラリはSitecoreフィールド値の出力を支援する構造的指示を提供します。構造的指示を使う利点は、開発者としてタグのすべての機能が利用可能であり、他のコンポーネントにラップされないことです。Experience Editor内で動作する場合、マークされたタグは編集可能な別の要素に置き換えられます。
例えば、画像の編集を有効にするには:
<img *scImage="rendering.fields.logoImage" />
以下は、すべてのサポートされる構造指令とその使用方法の一覧です。
!注以下の例では、フィールドがプレースホルダーコンポーネントからのデータであると仮定します。
本文
この構造指令は以下の入力プロパティをサポートします:
名称
概要
デフォルト /scText
レンダリングしたいコンポーネントまたはルートフィールド。通常はSitecoreタイプの単行テキストまたは多行テキストですが、数値タイプでも使用可能です。
editable
エクスペリエンスエディター/Sitecore形式のHTML出力を使うべきかを示します。(デフォルト
)encode
出力値のHTMLエンコーディングを有効または無効にします。false値は編集可能(editable: false)も意味します。(デフォルト
)マルチラインテキストの場合、提供された編集可能な値はすでに
で改行が置き換えられています。編集不可の値を使う場合は、field.value処理してJSONの改行を望むマークアップに置き換えるか、pre-wrapのようなCSSの空白表示を使うことができます。
リッチテキスト
この構造指令は以下の入力プロパティをサポートします:
名称
概要
デフォルト /scRichText
レンダリングしたいコンポーネントまたはルートフィールド。Sitecoreタイプのリッチテキストであるべきです。
editable
エクスペリエンスエディター/Sitecore形式のHTML出力を使うべきかを示します。(デフォルト
)画像
<img *scImage="field; editable: true" />
この構造指令は以下の入力プロパティをサポートします:
名称
概要
デフォルト /scImage
レンダリングしたいコンポーネントまたはルートフィールド。Sitecoreタイプのイメージであるべきです。
editable
エクスペリエンスエディター/Sitecore形式のHTML出力を使うべきかを示します。(デフォルト
)urlParams
画像URLに追加されたクエリ文字列パラメータ。JSSはメディアURLのセキュリティハッシュをサポートしていないため、これらのパラメータセットはサーバー上でホワイトリストに登録する必要があります。
attrs
結果として生成される画像タグのキー/値属性値。ホスト要素に追加された属性もパススルーされますが、データバインディングはサポートしません。
*scImage指令はattrs入力プロパティを通じて提供された場合、srcSet属性に特別な扱いを与えます。srcSetの各要素に対してクエリ文字列パラメータを表すオブジェクトの配列を提供できます。これにより、サイズ属性と組み合わせることでサーバー側レンダリングに対応したレスポンシブ画像が可能になります。
リンク
<a *scLink="field; editable: true">
この構造指令は以下の入力プロパティをサポートします:
名称
概要
デフォルト /scLink
レンダリングしたいコンポーネントまたはルートフィールド。SitecoreタイプのGeneral Linkであるべきです。
editable
エクスペリエンスエディター/Sitecore形式のHTML出力を使うべきかを示します。(デフォルト
)attrs
結果として得られる出力タグのキー/値属性値。ホスト要素に追加された属性もパススルーされますが、データバインディングはサポートしません。
Sitecoreの編集可能な出力を使用する場合、scLinkはSitecore提供のマークアップをラッパー範囲で作成し、ホスト要素の属性とattrをこのスパンに適用します。
ファイル
<a *scFile="field">
この構造指令は以下の入力プロパティをサポートします:
名称
概要
デフォルト /scFile
レンダリングしたいコンポーネントまたはルートフィールド。Sitecoreタイプのファイルであるべきです。
ファイルフィールドはSitecoreのエクスペリエンスエディターによるインライン編集をサポートしていませんが、コンポーネントのデフォルトフィールドエディターで編集可能です。