Question

我在注入服务的地方有一个Angular组件：

export class ParentComponent implements OnInit {
  constructor(private permissionService: PermissionService) { }
  ngOnInit() {
    this.permissionService.loadPermissions();
  }
}

此组件的模板使用还注入了PermissionService的其他组件（子组件）。

PermissionService如下：

export class PermissionService {

  public permissions: Observable<Permission[]>;

  constructor(private httpClient: HttpClient)

  public loadPermissions() {
    this.permissions =  this.httpClient.get<Permission[]>>(`/permissions`);
  }

}

方法loadPermissions将来自API的权限加载到可观察的permissions中。

{loadPermissions在ParentComponent的Init中被调用，并且从permissions开始使用可观察的

。

如何确保仅在加载权限后，父组件和子组件才使用permissions？

还有更好的方法吗？

目标是使用父级和子级组件使用之前的数据来初始化服务PermissionService。

Answer 1

您认为这可以帮助您实现自己想要的东西吗？

export class PermissionService {

  public permissions: Permission[];
  permissionsSubject = new BehaviorSubject(this.permissions);

  constructor(private httpClient: HttpClient)

  public loadPermissions() {
    this.httpClient.get<Permission[]>>(`/permissions`).subscribe(permissions => {
      this.permissions = permissions;
      this.permissionsSubject.next(this.permissions)

    })
  }

}

您只需要订阅permissionsSubject

Answer 2

您可以使用async管道，Angular将为您处理“等待直到可用”部分。

您可以做一些事情：

更改您的loadPermissions()方法以返回可观察值：

public loadPermissions(): Observable<Permission[]> {
  return this.httpClient.get<Permission[]>>(`/permissions`);
}

在父组件中，将可观察对象分配给属性：

export class ParentComponent implements OnInit {
  permissions: Observable<Permission[]>;

  constructor(private permissionService: PermissionService) { }
  ngOnInit() {
    this.permissions = this.permissionService.loadPermissions();
  }
}

在模板中，使用*ngIf和async管道的组合。如果需要，您也可以将可观察对象传递给孩子（或将相同的服务注入到孩子组件中。
```
<div *ngIf="permissions | async">
    ...
    <app-child-compo [perms]="permissions"></app-child-compo>
    ...
</div>
```

在组件使用之前初始化服务数据

2 个答案: