首页 文章

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

提问于
浏览 次
0

我有一个父组件有4个子组件，在该子组件中，我填充变量并在其HTML中显示该变量 .

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

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

parent.html

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

.ts

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

在每个儿童组件中都有这样的功能......现在有些孩子正在早期观看，有些正在观看较晚 . 我希望在我的所有子数据都存在时显示包含所有子项的父组件

angular

1 回答

  • 1

    如果你想要你可以使用事件 Launcher . 这是一个例子：

    @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
    }
}

    这样的事情可以帮助你实现你想要的 .

    回复于

相关问题