Angular Universal에서 데이터 사전 로드

내 .

오리지널 워크 어라운드

특정 상황에서 코드를 실행하기 위해 ZoneJSscheduleMacroTask를 사용할 수 있습니다. 새 객체를 반환하는 생성자이기 때문에 생성자에 무언가를 미리 로드할 수 없습니다. ngOnInit는 상황에 따라 작동할 수 있습니다.

아니요, 다른 프레임워크를 배우기 시작할 때까지는 Angular UniversalProviders이 이해되기 시작했습니다. 돌아가서 내 과거 기사를 읽으면 이러한 진화를 볼 수 있습니다.

데이터를 올바르게 프리페치하려면 먼저 구성 요소 외부에서 데이터를 로드해야 합니다. 서로 의존하는 순환 기능을 유발할 수 있기 때문에 항상 ZoneJS 해킹을 사용할 수는 없습니다.

기타 프레임워크

React에서 가장 싫어하는 점은 상태를 처리하는 방법입니다. NextJS, NuxtJS 및 SvelteKit을 파헤치기 시작하면 데이터가 항상 함수/클래스에서 사전 로드된 다음 데이터가 해당 클래스로 전달된다는 것을 알게 됩니다.

각도 유니버설

이것이 Angular Universal이 데이터를 처리하는 방법입니다. 많은 stackoverflow 기사를 Google에서 검색하면 이 프로세스가 매우 복잡하다는 것을 알 수 있습니다.

기본적으로 app.module.ts를 사용하여 서비스에서 APP_INITIALIZER의 데이터를 로드할 것입니다. 서비스 자체는 데이터를 반환하지 않지만 데이터를 상태로 유지합니다.

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

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

full source code은 내 마지막 게시물에 사용되었으므로 적절한 상태 전송, 나머지 API 및 Vercel에 배포되어 완전히 작동하는 것을 볼 수 있습니다.

참조하세요in action . 내 마지막 게시물을 읽으면 'some data...' 문자열이 이미 DOM에 있고 이제 올바르게 로드된다는 것을 알 수 있습니다.

제이