如何仅当数据来自服务器时才激活组件？

Question

有一个 parent 组件，我将其称为 child 组件：

 <app-add-object-layer-component></app-add-object-layer-component>

Child里面有个服务：

 constructor(private editService: editService) {

 }

 getEditData(){
    return this.editService.get();
 }

Child 即使没有返回数据，组件也会始终初始化。

当然，我可以将 editService 移到上层并像这样使用它：

<app-add-object-layer-component *ngIf="editService.getEditData()"></app-add-object-layer-component>

但在这种情况下 parent 组件具有外来依赖性 constructor(private editService: editService) {}

如何根据getEditData方法返回的数据在parent组件中show/hidechild组件？

Answer 1

声明组件变量data:any; 然后在 ngOnInit() {} 中使用您的服务功能从服务器获取此数据，例如 this.editService.getEditData.subscribe(res=> this.data = res)

然后在 html 中你可以像 <app-add-object-layer-component *ngIf="data"></app-add-object-layer-component>

那样使用它

Answer 2

代码有误。 editService.getEditData() 会 return 答应。这是定义的并且总是正确的。您需要检查已解析的值。为此使用异步管道。

"(editService.getEditData() | async)?.something"

<app-add-object-layer-component *ngIf="(editService.getEditData() | async)?.something"></app-add-object-layer-component>

How to activate component only when data comes from server?