Angular 2가 모델을 로드/분해할 때까지 기다린 후 뷰/템플릿 렌더링

Angular 2가 모델을 로드/분해할 때까지 기다린 후 뷰/템플릿 렌더링

Angular 1.x에서는 UI-Router가 이를 위한 주요 도구였습니다.라우터는 "해결" 값에 대한 약속을 반환함으로써 지시를 렌더링하기 전에 약속이 완료되기를 기다리기만 하면 됩니다.

1렌더라도 "Angular 1.x" null을 할 수 있습니다.$digest다을렌합니다링 뒤에 .promise.then()처음에 비어 있던 모델 개체를 채웁니다.

가능하면 두 가지 접근 방식 중에서 보기를 로드할 때까지 기다렸다가 리소스를 로드할 수 없는 경우 경로 탐색을 취소하고 싶습니다.이것은 저에게 "항법 해제" 작업을 덜어줍니다.편집: 이 질문은 구체적으로 이를 위해 Angular 2 미래 호환 또는 모범 사례 방법을 요청하고 가능하면 "Elvis 연산자"를 피하도록 요청한다는 것을 의미합니다! 그래서 저는 그 답을 선택하지 않았습니다.

그러나 이 두 가지 방법 모두 Angular 2.0에서는 작동하지 않습니다.물론 이를 위해 계획되거나 사용 가능한 표준 솔루션이 있습니다.그게 뭔지 아는 사람?

@Component() {
    template: '{{cats.captchans.funniest}}'
}
export class CatsComponent {

    public cats: CatsModel;

    ngOnInit () {
        this._http.get('/api/v1/cats').subscribe(response => cats = response.json());
    }
}

다음 질문은 동일한 문제를 반영할 수 있습니다.데이터가 포함된 PROMISION이 로드된 후 Angular 2 렌더 템플릿입니다. 이 질문에는 코드나 승인된 답변이 없습니다.

ㅠㅠ{{model?.person.name}}이것은 모델이 그렇지 않을 때까지 기다려야 합니다.undefined렌더링합니다.

는 이 Angular 2를 말합니다.?.엘비스 연산자로서의 구문.설명서에서 해당 문서에 대한 참조를 찾기가 어렵기 때문에 변경/이동하는 경우를 대비하여 다음과 같이 사본을 제공합니다.

Elvis 연산자(?) 및 null 속성 경로

Angular "Elvis" 연산자(?)는 속성 경로에서 null 및 정의되지 않은 값을 보호하는 유창하고 편리한 방법입니다.여기 있습니다. 현재의 경우 뷰 렌더 실패로부터 보호합니다.영웅은 null입니다.

The current hero's name is {{currentHero?.firstName}}

문제와 이 특별한 해결책에 대해 자세히 설명해 보겠습니다.

다음 데이터 바인딩된 제목 속성이 null이면 어떻게 됩니까?

The title is {{ title }}

보기는 여전히 렌더링되지만 표시된 값은 공백입니다. 제목 뒤에 아무것도 없는 "제목은"만 표시됩니다.그것은 합리적인 행동입니다.적어도 앱은 작동하지 않습니다.

다음 예제에서 Null 영웅의 첫 번째 이름을 표시하는 것과 같이 템플릿 표현식에 속성 경로가 포함되어 있다고 가정합니다.

The null hero's name is {{nullHero.firstName}}

JavaScript가 null 참조 오류를 발생시키고 Angular도 마찬가지로 Null 참조 오류를 발생시킵니다.

TypeError: Cannot read property 'firstName' of null in [null]

더 나쁜 것은 전체 보기가 사라집니다.

영웅의 재산이 절대 무효가 되어서는 안 된다고 믿는다면 이것은 합리적인 행동이라고 주장할 수 있습니다.절대 null이 아니어야 하는데 null이 아니면 프로그래밍 오류가 발생하여 수정해야 합니다.예외를 두는 것은 옳은 일입니다.

반면에 속성 경로의 null 값은 때때로 정상일 수 있습니다. 특히 데이터가 최종적으로 도착할 것으로 예상되는 경우에는 더욱 그렇습니다.

데이터를 기다리는 동안 보기는 불만 없이 렌더링되고 null 속성 경로는 제목 속성과 마찬가지로 공백으로 표시됩니다.

불행하게도, 우리 앱은 전류가 흐를 때 충돌합니다.영웅은 null입니다.

NgIf로 그 문제를 코드화할 수 있습니다.

<!--No hero, div not displayed, no error --> <div *ngIf="nullHero">The null hero's name is {{nullHero.firstName}}</div>

또는 속성 경로의 일부를 &&로 연결하여 식이 첫 번째 null에 도달할 때 실행된다는 것을 알 수 있습니다.

The null hero's name is {{nullHero && nullHero.firstName}}

이러한 접근 방식은 장점이 있지만 특히 속성 경로가 긴 경우에는 번거로울 수 있습니다.ACD와 같은 긴 속성 경로의 어딘가에서 null을 경계한다고 상상해 보십시오.

Angular "Elvis" 연산자(?)는 속성 경로에서 null을 방지하는 더 유창하고 편리한 방법입니다.식이 첫 번째 null 값에 도달하면 중단됩니다.화면은 공백이지만 앱이 계속 롤링되고 오류가 없습니다.

<!-- No hero, no problem! --> The null hero's name is {{nullHero?.firstName}}

긴 속성 경로에서도 완벽하게 작동합니다.

a?.b?.c?.d

키지@angular/router을 가지고 있습니다.Resolve 해결할 수 .따라서 경로 보기를 렌더링하기 전에 데이터를 쉽게 확인할 수 있습니다.

참조: https://angular.io/docs/ts/latest/api/router/index/Resolve-interface.html

2017년 8월 28일 현재 문서의 예:

class Backend {
  fetchTeam(id: string) {
    return 'someTeam';
  }
}

@Injectable()
class TeamResolver implements Resolve<Team> {
  constructor(private backend: Backend) {}

  resolve(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<any>|Promise<any>|any {
    return this.backend.fetchTeam(route.params.id);
  }
}

@NgModule({
  imports: [
    RouterModule.forRoot([
      {
        path: 'team/:id',
        component: TeamCmp,
        resolve: {
          team: TeamResolver
        }
      }
    ])
  ],
  providers: [TeamResolver]
})
class AppModule {}

이제 데이터가 해결되고 반환될 때까지 경로가 활성화되지 않습니다.

구성 요소의 확인된 데이터 액세스

런타임에 구성 요소 내에서 확인된 데이터에 액세스하려면 두 가지 방법이 있습니다.따라서 필요에 따라 다음 중 하나를 사용할 수 있습니다.

1. route.snapshot.paramMap을 반환합니다. 문열을경우또는는반환하자또는▁a▁which▁the
2. route.paramMap할 수 항목을 합니다..subscribe()

예:

  // the no-observable method
  this.dataYouResolved= this.route.snapshot.paramMap.get('id');
  // console.debug(this.licenseNumber);

  // or the observable method
  this.route.paramMap
     .subscribe((params: ParamMap) => {
        // console.log(params);
        this.dataYouResolved= params.get('id');
        return params.get('dataYouResolved');
        // return null
     });
  console.debug(this.dataYouResolved);

그게 도움이 되길 바랍니다.

편집: 각진 팀이 @Resolve 데코레이터를 출시했습니다.어떻게 작동하는지에 대한 설명이 여전히 필요하지만, 그 전까지는 다른 사람의 관련 답변을 여기에 추가하고 다른 출처에 대한 링크를 제공하겠습니다.

• 스택 오버플로:Angular2 경로에서 해결 사용
• 스택 오버플로:귄터 쇠흐바우어의 사용 샘플
• 문서 해결
• GitHub의 라우터 패치
• RC4 변경 로그
• RC4 릴리스 트윗

---

편집: 이 답변은 Angular 2 베타에서만 사용할 수 있습니다.이 편집 시점에서 라우터는 Angular 2 RC용으로 릴리스되지 않았습니다.대신 Angular 2 RC를 사용할 때 참조를 다음으로 바꿉니다.router와 함께router-deprecated베타 라우터를 계속 사용합니다.

Angular2의 향후 구현 방법은 @Resolve 데코레이터를 사용하는 것입니다.그때까지 가장 가까운 팩시밀리는CanActivateBrandon Roberts에 따라 구성 요소 장식가.https://github.com/angular/angular/issues/6611 을 참조하십시오.

베타 0은 구성 요소에 확인된 값을 제공하는 것을 지원하지 않지만 계획된 것이며 여기에 설명된 해결 방법도 있습니다.

베타 1의 예는 http://run.plnkr.co/BAqA98lphi4rQZAd/ #/beta에서 찾을 수 있습니다.매우 유사한 해결 방법을 사용하지만 약간 더 정확하게는RouteData보다 객관적인RouteParams.

@CanActivate((to) => {
    return new Promise((resolve) => {
        to.routeData.data.user = { name: 'John' }

또한 중첩/상위 경로 "해결된" 값과 1.x UI-Router를 사용한 경우 예상되는 기타 기능에 액세스하기 위한 해결 방법의 예도 있습니다.

각도 인젝터 계층은 현재 CanActivate 데코레이터에서 사용할 수 없기 때문에 이 작업에 필요한 모든 서비스를 수동으로 주입해야 합니다.인젝터를 가져오기만 하면 공급자에 액세스할 수 없는 새 인젝터 인스턴스가 생성됩니다.bootstrap()따라서 부트스트랩된 인젝터의 애플리케이션 전체 복사본을 저장해야 할 것입니다.이 페이지에 있는 브랜든의 두 번째 플렁크 링크는 좋은 출발점입니다. https://github.com/angular/angular/issues/4112

관찰자를 사용하여 로컬 값 설정

...또한 더미 데이터를 사용하여 값을 초기화하는 것을 잊지 마십시오.uninitialized오류

export class ModelService {
    constructor() {
      this.mode = new Model();

      this._http.get('/api/v1/cats')
      .map(res => res.json())
      .subscribe(
        json => {
          this.model = new Model(json);
        },
        error => console.log(error);
      );
    }
}

모형은 데이터의 구조를 나타내는 데이터 모형이라고 가정합니다.

매개 변수가 없는 모델은 모든 값이 초기화된 새 인스턴스(빈 값)를 생성해야 합니다.이렇게 하면 데이터가 수신되기 전에 템플릿이 렌더링되면 오류가 발생하지 않습니다.

이상적으로 불필요한 http 요청을 방지하기 위해 데이터를 유지하려면 구독할 수 있는 자체 관찰자가 있는 개체에 이를 넣어야 합니다.

제가 찾은 좋은 솔루션은 UI에서 다음과 같은 작업을 수행하는 것입니다.

<div *ngIf="vendorServicePricing && quantityPricing && service">
 ...Your page...
</div

다음과 같은 경우에만:vendorServicePricing,quantityPricing그리고.service다시 로드하면 페이지가 렌더링됩니다.

» routerOnActivate의 신의에@Component약속을 지키겠습니다

https://angular.io/docs/ts/latest/api/router/OnActivate-interface.html

편집: 현재 문서는 이 주제에 대해 해석하기가 조금 어려울 수 있지만, 이것은 분명히 작동하지 않습니다.자세한 내용은 Brandon의 첫 댓글을 참조하십시오. https://github.com/angular/angular/issues/6611

편집: 일반적으로 검색되는 Auth0 사이트의 관련 정보가 올바르지 않습니다. https://auth0.com/blog/2016/01/25/angular-2-series-part-4-component-router-in-depth/

편집: 각 팀은 이를 위해 @Resolve 데코레이터를 계획하고 있습니다.

언급URL : https://stackoverflow.com/questions/34731869/wait-for-angular-2-to-load-resolve-model-before-rendering-view-template