如何从父组件调用子组件的功能

Question

我就是看不懂，

如何在点击父组件中的按钮时调用子组件中的函数？

Answer 1

使用 ViewChild 装饰器。 https://alligator.io/angular/viewchild-access-component/#child-components 很简单 ;)

Answer 2

使用 @ViewChild 装饰器来访问您的子组件。

import { ChildComponent } './child.component'
import { ViewChild } from '@angular/core';

export class ParentComponent {

  @ViewChild(ChildComponent)
  childComponent: ChildComponent;

  someMethod() {
     this.childComponent.someFunction();
  }
}

Answer 3

如果这是您的父模板：

<button (click)="onClick()">Click</button>
<div>
  <child-component></child-component>
</div>

您可以在父级中使用 @ViewChild()：

export class ParentComponent {
  @ViewChild(ChildComponent)
  child: ChildComponent;

  onClick(): void {
    if (this.child) {
      this.child.someFunction();
    }
  }
}

另一种方法是直接在模板中进行：

您可以将模板更改为：

<button (click)="child.someFunction()">Click</button>
<div>
  <child-component #child></child-component>
</div>

那就不用@ViewChild了。如果您需要在 click

中执行其他操作，您甚至可以将子变量传递给父级中的函数

Answer 4

正如其他人所说，您可以使用@ViewChild。但是请注意，通过这种方式，您将在该类型的第一个子节点上调用函数 。如果您有这样的子组件：

@Component({ selector: 'app-my-child', template: '<p>I am the child number {{id}} </p>' }) export class MyChildComponent { @Input() id: number; constructor() { } print() { console.log('Action from id ' + this.id); } }

和这样的父组件：

<button (click)="printChild()">Print!</button> <app-my-child [id]="1"></app-my-child> <app-my-child [id]="2"></app-my-child>

被
引用
@Component({ selector: 'app-internal', templateUrl: './internal.component.html' }) export class InternalComponent { @ViewChild(MyChildComponent) child: MyChildComponent; constructor() { } printChild() { this.child.print(); } }

您将始终调用找到的第一个元素的打印函数。因此，如果您交换两个 MyChildComponents，您将打印 "Action from id 2"。

为避免它，您可以像这样明确标识目标组件：

<button (click)="id2.print()">Print!</button> <app-my-child #id1 [id]="1"></app-my-child> <app-my-child #id2 [id]="2"></app-my-child>

如果您不想在组件中引用它们 class 或使用相反的方法：

@ViewChild('id1') child1 : MyChildComponentComponent; printChild() { this.child1.print(); }

如何从父组件调用子组件的功能

How to call function of the child component from parent component

angular

typescript

parent-child

communication