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

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

@placeholder デフォルトでは、遅延ブロックはトリガーされる前にコンテンツをレンダリングしません。@placeholderは、遅延コンテンツの読み込み前に表示するコンテンツを宣言するオプションのブロックです。Angularは読み込みが完了した後、プレースホルダーを遅延コンテンツに置き換えます。このブロックはオプションですが、Angularチームは常にプレースホルダーを含めることを推奨しています。 遅延可能ビューの完全なドキュメントで詳細を確認してください
@loading このオプションのブロックを使用すると、遅延した依存関係の読み込み中に表示するコンテンツを宣言できます。
@error このブロックを使用すると、遅延読み込みが失敗した場合に表示されるコンテンツを宣言できます。

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

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

  1. @placeholderブロックの追加

    app.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.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>}

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