Question

我有一个获取对象列表的父组件。父组件的相应html文件使用ngFor基于该列表创建多个子组件。你如何在每个子组件中调用一个函数？

这是我的父组件Typescript文件（为清晰起见而编辑）：

export class HomeComponent {
    childObjects: Array<ChildObject> = [];

    constructor() {
        this.childObjectService.getChildObjects()
            .subscribe(res => {
            this.childObjects = res;
        }); 
    }
}

这是我的父组件HTML：

<childObjectComponent *ngFor="let childObject of childObjects">
    <!--I want to call a function on each of these childObjectComponent template objects-->
<childObjectComponent>

因此，如果我的所有ChildObject组件类都有一个名为AddNumbers（）的函数，我将如何在所有的ChildObjects上调用它？

Answer 1

如果我理解正确，你想为每个childObjects（ngFor）都有一个DOM元素，你可以在单击元素时在对象上执行一个函数：

export class HomeComponent {
    childObjects: Array<ChildObject> = [];

    constructor() {
        this.childObjectService.getChildObjects()
            .subscribe(res => {
            this.childObjects = res;
        }); 
    }

    doSomething(childObject : ChildObjectType) {
      /* Do something with child object */
    }
}

<childObjectComponent *ngFor="let childObject of childObjects">
  <div (click)="doSomething(childObject)">{{childObject.text}}</div>
<childObjectComponent>

编辑：对所有对象执行以下操作：

export class HomeComponent {
    childObjects: Array<ChildObject> = [];

    constructor() {
        this.childObjectService.getChildObjects()
            .subscribe(res => {
            this.childObjects = res;
        }); 
    }

    doSomethingOnAll() {
      this.childObjects.forEach((child) => {
        /* do something on each child object */
      } 
    }
}

<childObjectComponent *ngFor="let childObject of childObjects">
  <div (click)="doSomethingOnAll()">{{childObject.text}}</div>
<childObjectComponent>

Answer 2

在子级中使用父级调用方法的一种方法是使用@ViewChild。 Angular文档中记录了它： https://angular.io/guide/component-interaction#parent-calls-an-viewchild

请注意，在父级中，您必须等待ngAfterViewInit，这允许孩子自己渲染。

整个页面列出了组件相互通信的几种不同方式。

Answer 3

我设法通过创建与childObjectComponent模板对象关联的对象列表来解决我的问题。基本上，每当创建一个childObjectComponent时，我都会使用Angular提供的ngAfterViewInit（）方法将对象发送到我的父组件。父组件将发出的对象添加到它维护的列表中。

例如，如果创建了5个childObjectComponent模板对象，则将向父组件发出5个对象。父组件将这5个添加到列表中。然后，我可以使用for循环对这些模板对象做任何我想做的事情。

调用属于ngFor的子组件的函数

3 个答案: