Блог

Главная - Вопросы по программированию - Как вызвать функцию дочернего компонента из родительского компонента

Как вызвать функцию дочернего компонента из родительского компонента

#angular #typescript #parent-child #communication

#angular #typescript #родитель-потомок #Информационные материалы

Вопрос:

Я просто не могу понять,

Как вызвать функцию внутри дочернего компонента при нажатии на кнопку в родительском компоненте?

Комментарии:

1. @ViewChild должен сделать свое дело. Получить доступ к дочернему компоненту из родительского компонента. Затем вызовите дочернюю функцию в файле parent .ts при нажатии кнопки.

Ответ №1:

Используйте @ViewChild декоратор, чтобы получить доступ к вашему дочернему компоненту.

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

export class ParentComponent {

  @ViewChild(ChildComponent)
  childComponent: ChildComponent;

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

Ответ №2:

Если это ваш родительский шаблон:

 <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 . Вы даже можете передать дочернюю переменную функции внутри вашего родительского компонента, если вам нужно выполнить дополнительные действия одним щелчком мыши

Ответ №3:

Используйте декоратор ViewChild. https://alligator.io/angular/viewchild-access-component/#child-components Все очень просто 😉

Ответ №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();
     }
   }

вы всегда будете вызывать функцию печати первого найденного элемента. Итак, если вы поменяете местами два компонента MyChild, у вас будет напечатано «Действие с идентификатором 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>

если вы не хотите ссылаться на них в классе компонента или использовать противоположный подход:

     @ViewChild('id1') child1 : MyChildComponentComponent;


   printChild() {
      this.child1.print();
    }
Метки: