複数のテンプレートの表示

複数のデザインを持つコンポーネントを表示することもできますが、1 つのファイル内に HTML を混在させたくはありません。たとえば、あるバージョンのコンポーネントはプレーンで、別のバージョンでは画像と追加のテキストが表示されるとします。この場合は、複数の HTML テンプレートをインポートし、条件に応じて各バージョンを表示するビジネスロジックを作成します。このパターンは、一部の JavaScript フレームワークで使用されるコード分割に似ています。

コンポーネントで複数のテンプレートを表示できますが、代わりに lwc:if|elseif|else ディレクティブを使用して、ネストされたテンプレートを条件に応じて表示することをお勧めします。

コンポーネントバンドル内に複数の HTML ファイルを作成します。これらのファイルをすべてインポートし、コンポーネントの状態に応じて適切なテンプレートが返されるようにするための条件を render() メソッドに追加します。render() メソッドから返される値は、HTML ファイルからインポートされたデフォルトのエクスポートであるテンプレート参照でなければなりません。

この例の場合、テンプレート参照は、templateOnetemplateTwo です。

追加テンプレートから CSS を参照するには、CSS のファイル名が外部テンプレートのファイル名と一致している必要があります。たとえば、templateTwo.html は、templateTwo.css からのみ CSS を参照できます。miscMultipleTemplates.csstemplateOne.css から CSS を参照することはできません。

miscMultipleTemplates.html という同じ名前のテンプレートが含まれている場合、デフォルトの render() メソッドは、前の例で説明した上書きが含まれていない限り、そのテンプレートを返します。

lwc-recipes リポジトリmiscMultipleTemplates コンポーネントをチェックアウトしてください。

関連トピック