Angular 2がモデルをロード/解決するのを待ってから、ビュー/テンプレートをレンダリングする。

質問

Angular 1.xでは、UI-Routerはこのための私の主要なツールでした。resolve"値に対してプロミスを返すことで、ルーターはディレクティブをレンダリングする前に、単にプロミスが完了するのを待ちました。

代わりに、Angular 1.xでは、NULLオブジェクトはテンプレートをクラッシュさせないので、一時的に不完全なレンダリングを気にしないのであれば、単に $digest の後にレンダリングするために promise.then() が最初に空のモデルオブジェクトを生成した後にレンダリングされます。

2つのアプローチのうち、可能であれば、ビューをロードするのを待ち、リソースをロードできない場合はルートナビゲーションをキャンセルすることを好みます。これにより、ナビゲーションを解除する作業を省くことができます。 EDIT: これは特に、この質問がAngular 2の未来と互換性のある、またはこれを行うためのベストプラクティスの方法を要求し、可能であれば"Elvis operator"を避けるよう求めていることに注意してください! したがって、私はその答えを選択しませんでした。

しかし、これら2つの方法のどちらも、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());
    }
}

次の質問は、同じ問題を反映しているかもしれません。 データを持つPROMISEがロードされた後、Angular 2レンダリングテンプレート . 質問にはコードや受け入れられた答えがないことに注意してください。

どのように解決するのですか？

パッケージ @angular/router には Resolve プロパティを使用しています。そのため、ルートビューをレンダリングする前に、簡単にデータを解決することができます。

参照してください。 https://angular.io/docs/ts/latest/api/router/index/Resolve-interface.html

本日2017年8月28日時点のdocsからの例です。

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

これで、データが解決されて返されるまで、ルートは有効になりません。

コンポーネントで解決されたデータにアクセスする

実行時にコンポーネント内から解決されたデータにアクセスするには、2つの方法があります。したがって、ニーズに応じて、どちらかを使用することができます。

1. route.snapshot.paramMap という文字列を返すか
2. route.paramMap はObservableを返すので .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);

お役に立てれば幸いです。