角度ユニバーサルにおけるデータのプリロード

私のためにコードを書いた後、私は、どのように角度一般的なデータを事前に取得することができます基本的な誤解を認識しました.

オリジナル作品

特定の状況では、ZoneJSscheduleMacroTask コードを実行するには.コンストラクターで何かをプリロードできません.新しいオブジェクトを返すコンストラクターです.The ngOnInit あなたの状況次第で働きますように.
いいえ、私は他のフレームワークを学習するまで、角ユニバーサルProviders 意味をなすようになった.あなたが戻って、私の過去記事を読むならば、あなたはこの進化を見るために始めることができます.
データを正しくプリフェッチするには、まずコンポーネントの外部にロードする必要があります.それはお互いに依存する円形の関数を引き起こす可能性があるので、あなたはいつもZonejsハックを使用することはできません.

その他の枠組み

私が反応することを憎む最大のものは、それがどのように状態を扱うかです.いったんnextjs、nuxtjs、およびsveltekitに掘り出し始めると、データは常に関数/クラスからプリロードされ、データはそのクラスに渡されます.

アングルユニバーサル

これは、普遍的な角度のデータを処理するためのものです.Googleがたくさんのスタックオーバーの記事ならば、このプロセスは非常に複雑になります.
基本的にあなたのデータをロードしますapp.module.ts あなたのサービスからAPP_INITIALIZER . サービス自体はデータを返しませんが、データを状態に保ちます.
アプリ.モジュールです.TS

providers: [{
    provide: APP_INITIALIZER,
    deps: [myService],
    useFactory: (rest: myService) => async () => await rest.getData(),
    multi: true
  }],

Example File
MyService.TS
ここでは、単にデータを取得し、変数に保存しますthis.data . サービスのこのインスタンスを新しいコンポーネントにプロバイダーとして渡すと、this.data 変数.

async getData(): Promise<void> {
  ...
  this.data = await this.fetchData();
}

この関数は何も返しません.
Example File
アプリ.コンポーネント.TS
ここでは、文字通りちょうどあなたのサービスからデータを得ますthis.data , それをしてください.信じられないほど簡単.

import { Component } from '@angular/core';

import { RestService } from './rest.service';


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {

  title = 'angular-test';
  data: string;

  constructor(private rest: RestService) {
    this.data = this.rest.data;
  }
}

Example File
The full source code 私の最後のポストに使用されたので、完全に適切な状態の転送、残りのAPIとアクションでそれを見ることができますし、Vercelに展開.
参照in action . あなたが私の最後のポストを読むならば、あなたは『若干のデータ』に気がつきます文字列は既にDOMにあり、現在は正しくロードされます.
J