複数のテンプレートの表示
複数のデザインを持つコンポーネントを表示することもできますが、1 つのファイル内に HTML を混在させたくはありません。たとえば、あるバージョンのコンポーネントはプレーンで、別のバージョンでは画像と追加のテキストが表示されるとします。この場合は、複数の HTML テンプレートをインポートし、条件に応じて各バージョンを表示するビジネスロジックを作成します。このパターンは、一部の JavaScript フレームワークで使用されるコード分割に似ています。
コンポーネントで複数のテンプレートを表示できますが、代わりに lwc:if|elseif|else
ディレクティブを使用して、ネストされたテンプレートを条件に応じて表示することをお勧めします。
コンポーネントバンドル内に複数の HTML ファイルを作成します。これらのファイルをすべてインポートし、コンポーネントの状態に応じて適切なテンプレートが返されるようにするための条件を render()
メソッドに追加します。render()
メソッドから返される値は、HTML ファイルからインポートされたデフォルトのエクスポートであるテンプレート参照でなければなりません。
この例の場合、テンプレート参照は、templateOne
と templateTwo
です。
追加テンプレートから CSS を参照するには、CSS のファイル名が外部テンプレートのファイル名と一致している必要があります。たとえば、templateTwo.html
は、templateTwo.css
からのみ CSS を参照できます。miscMultipleTemplates.css
や templateOne.css
から CSS を参照することはできません。
miscMultipleTemplates.html
という同じ名前のテンプレートが含まれている場合、デフォルトの render()
メソッドは、前の例で説明した上書きが含まれていない限り、そのテンプレートを返します。
lwc-recipes リポジトリの miscMultipleTemplates
コンポーネントをチェックアウトしてください。
関連トピック