@loading, @error と @placeholder ブロック

遅延可能ビューを使用すると、さまざまな読み込み状態に表示するコンテンツを定義できます。

上記のすべてのサブブロックの内容は、事前に読み込まれます。さらに、いくつかの機能には@placeholderブロックが必要です。

このアクティビティでは、@loading、@error、@placeholderブロックを使用して遅延可能ビューの状態を管理する方法を学習します。

1. @placeholderブロックの追加

   app.component.tsで、@deferブロックに@placeholderブロックを追加します。

         
   @defer {  <article-comments />} @placeholder {  <p>Placeholder for comments</p>}
       

2. @placeholderブロックの構成

   @placeholderブロックは、このプレースホルダーを表示する最小時間を指定するオプションのパラメーターを受け入れます。このminimumパラメーターは、ミリ秒(ms)または秒(s)の時間単位で指定されます。このパラメーターは、遅延した依存関係が迅速に取得された場合のプレースホルダーコンテンツの高速なちらつきを防ぐために存在します。

         
   @defer {  <article-comments />} @placeholder (minimum 1s) {  <p>Placeholder for comments</p>}
       

3. @loadingブロックの追加

   次に、コンポーネントテンプレートに@loadingブロックを追加します。

   @loadingブロックは、2つのオプションパラメーターを受け入れます。

   • minimum：このブロックを表示する時間
   • after：読み込み開始後、読み込みテンプレートを表示するまでの待ち時間

   どちらのパラメーターも、ミリ秒(ms)または秒(s)の時間単位で指定されます。

   @loadingブロックにminimumパラメーターを1s、afterパラメーターを500msとして含めるようにapp.component.tsを更新します。

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

   NOTE: この例では、;文字で区切られた2つのパラメーターを使用しています。

4. @errorブロックの追加

   最後に、@deferブロックに@errorブロックを追加します。

         
   @defer {  <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>}
       

おめでとうございます！この時点で、遅延可能ビューについて十分に理解できたはずです。素晴らしい仕事を続け、次にトリガーについて学びましょう。