遅延トリガー

@deferのデフォルトオプションは、コンポーネントの一部を遅延読み込みするのに優れた選択肢を提供しますが、遅延読み込みの体験をさらにカスタマイズすることが望ましい場合があります。

デフォルトでは、遅延コンテンツはブラウザがアイドル状態のときにロードされます。ただし、トリガーを指定することで、このロードが発生するタイミングをカスタマイズできます。これにより、コンポーネントに最適なロード動作を選択できます。

遅延可能ビューは、2種類のロードトリガーを提供します。

when条件がfalseと評価された場合、deferブロックはプレースホルダーに戻りません。交換は一度限りの操作です。

複数のイベントトリガーを一度に定義できます。これらのトリガーはOR条件として評価されます。

• 例: @defer (on viewport; on timer(2s))
• 例: @defer (on viewport; when customizedCondition)

このアクティビティでは、トリガーを使用して遅延可能ビューをロードする条件を指定する方法を学習します。

1. on hoverトリガーを追加する

   app.component.tsで、@deferブロックにon hoverトリガーを追加します。

         
   @defer (on hover) {  <article-comments />} @placeholder (minimum 1s) {  <p>Placeholder for comments</p>} @loading (minimum 1s; after 500ms) {  <p>Loading comments...</p>} @error {  <p>Failed to load comments</p>}
       

   これで、プレースホルダーにホバーするまで、ページはコメントセクションをレンダリングしなくなります。

2. 「すべてのコメントを表示」ボタンを追加する

   次に、ラベルが「すべてのコメントを表示」のボタンを含むようにテンプレートを更新します。ボタンに#showCommentsというテンプレート変数を設定します。

         
   <button type="button" #showComments>Show all comments</button>@defer (on hover) {  <article-comments />} @placeholder (minimum 1s) {  <p>Placeholder for comments</p>} @loading (minimum 1s; after 500ms) {  <p>Loading comments...</p>} @error {  <p>Failed to load comments</p>}
       

   Note：テンプレート変数に関する詳細については、ドキュメントを参照してください。

3. on interactionトリガーを追加する

   テンプレート内の@deferブロックを更新して、on interactionトリガーを使用します。interactionにパラメーターとしてshowCommentsテンプレート変数を指定します。

         
   <button type="button" #showComments>Show all comments</button>@defer (on hover; on interaction(showComments)) {  <article-comments />} @placeholder (minimum 1s) {  <p>Placeholder for comments</p>} @loading (minimum 1s; after 500ms) {  <p>Loading comments...</p>} @error {  <p>Failed to load comments</p>}
       

   これらの変更により、ページは次の条件のいずれかが満たされるまで、コメントセクションのレンダリングを待機します。

   • ユーザーがコメントセクションのプレースホルダーにホバーする
   • ユーザーが「すべてのコメントを表示」ボタンをクリックする

   ページをリロードして、コメントセクションをレンダリングするためのさまざまなトリガーを試すことができます。

詳細については、遅延可能ビューのドキュメントを参照してください。 Angularの優れた機能をさらに活用するために、学習を続けてください。