Question

我有一个具有4个子组件的父组件，在该子组件中，我正在填充变量并在HTML中显示该变量。

仅在加载所有子组件内容时，如何显示整个父组件？

每个子组件都有一个get方法。

parent.html

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.10/lodash.min.js"></script>

.ts

<child1></child1>
<child2></child2>
<child3></child3>
<child4></child4>

每个子组件中都具有这样的功能。.现在，有些孩子正在观看的很早，有些孩子正在观看的很晚。我想显示所有子数据都存在时包含所有子项的父组件

Answer 1

为此，您可以使用事件发射器。这是一个示例：

@Output()
child1EventEmitter= new EventEmitter;


ChildComp1() {
      getMethod().subscribe((response: any) => {
        if (response.data && response.status === "success") {
          this.data = response.data;
          this.child1EventEmitter.emit("child1Loaded");
        } else {
          throw new Error();
        }
      });
  }

现在在父母中，您可以执行以下操作：

<ng-container *ngIf="child1Loaded && child2Loaded && child3Loaded && child4Loaded">
    <child1 (child1EventEmitter)="isDataPresent($event)"></child1>
    <child2 (child2EventEmitter)="isDataPresent($event)"></child2>
    <child3 (child3EventEmitter)="isDataPresent($event)"></child3>
    <child4 (child4EventEmitter)="isDataPresent($event)"></child4>
</ng-container>

在打字稿中，您可以执行以下操作：

    export class Parent {

        child1Loaded: boolean;

        child2Loaded: boolean;

        child3Loaded: boolean;

        child4Loaded: boolean;


        isDataPresent(event) {
            if(event === "child1Loaded") {
        this.child1Loaded = true;
        }
        //and so on for other children
    }
}

类似的东西应该可以帮助您实现想要的目标。

在所有子内容加载角度4时显示父组件

1 个答案: