Question

我已经阅读了一些有关此主题的帖子，但我仍然没有找到解决方案。

我的情景：

我有一个服务：PermissionService，看起来像：

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}`);
        }
    });
}

当承诺最终确定变量时，canCreate设置为权限值。

此变量在我的模板中用于隐藏或显示某些组件，例如按钮。

这些东西都运转正常。所以我的问题是..有没有办法 Angular使它同步？

能够调用如下方法：

This.canCreate = this.servicePermission.hasPermission ....在承诺解决之前，我不会继续执行，因此我可以在呈现模板之前获得结果。

我需要这个，因为我无法显示一个页面，其中的按钮会因为权限而在几秒钟后消失。

我同意对后端的一些调用，例如从服务器获取数据需要异步，但在这种情况下，我需要结果才能正确呈现页面。

Answer 1

您不必等待它解析才能呈现取决于解析值的组件。

您应该做的是在组件标记中使用async pipe，并有条件地渲染按钮等。

像

这样的东西

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

Answer 2

Http请求返回Obseravbles，以便不阻止浏览器。如果要延迟加载组件/模板，请考虑在Angular中使用Resolvers。它们是专门为这种情况而制作的。

有关解析器和预取的更多信息 https://angular.io/guide/router#resolve-pre-fetching-component-data

等待承诺完成

2 个答案: