2017-11-15 14 views
0

私はこの件に関するいくつかの記事を読んだことがありますが、まだ解決策は見つかりませんでした。約束が完了するのを待つ

この私のシナリオ:

私がサービスを持っている:私はサービスを注入していると私はこのようにそれを使用する私のコンポーネントで

constructor(private http: HttpClient){} 
hasPermission(operation: string, objects: string): Observable<Permission> { 
    let queryStr: HttpParams = new HttpParams(); 
    queryStr = queryStr.set(“operation”,operation); 
    queryStr = queryStr.set(“objects”,objects); 
    return this.http.get<Permission>(this.url + permissionType, { params: queryStr }); 
} 

hasCreatePermission(){ 
     this.permissionsService.hasPermission("C","Categories").subscribe(
      res => { 
       this.canCreate = res.data[0].result; 
      }, (err: HttpErrorResponse) => { 
      if (err.error instanceof Error) { 
       console.log('An error occurred:', err.error.message); 
      } else { 
      console.log(`Backend returned code ${err.status}, body was: ${err.error}`); 
     } 
    }); 
} 
PermissionService、のように見えます

promiseが変数を確定すると、canCreateは許可の値で設定されます。

この変数は、ボタンなどの一部のコンポーネントを表示または非表示にするためにテンプレートで使用されます。

これらのすべては適切に機能しています。だから私の質問は..そこには何か方法がありますか? 角度を同期させるには?

のようなメソッドを呼び出すことができるように:

This.canCreate = this.servicePermission.hasPermission ...。私は約束が解決されるまで実行をcontiuneしないので、テンプレートがレンダリングされる前に結果を得ることができます。

権限のために数秒後に消えるボタンがあるページを表示できないため、これが必要です。

私は、サーバーからデータを取得するなど、バックエンドへの呼び出しが非同期である必要があることに同意しますが、この場合、ページを適切にレンダリングできるようにする必要があります。

答えて

1

解決された値に応じてコンポーネントをレンダリングできるようになるまで待つ必要はありません。あなたは何をすべき

要求は、ブラウザをブロックしないようにするために、Obseravblesを返す

<button [hidden]="!canCreate | async">Click me if allowed!</button>

0

HTTPのような

何かなど、コンポーネントのマークアップでasync pipeを使用して、条件付きのボタンをレンダリングしています。コンポーネント/テンプレートの読み込みを遅らせたい場合は、角度でのレゾルバの使用を検討してください。これらは、このシナリオ用に特別に作られています。

リゾルバとプリフェッチの詳細 https://angular.io/guide/router#resolve-pre-fetching-component-data

関連する問題