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

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

0 голосов
/ 18 апреля 2019

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

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

Ответы [ 4 ]

4 голосов
/ 18 апреля 2019

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

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

export class ParentComponent {

  @ViewChild(ChildComponent)
  childComponent: ChildComponent;

  someMethod() {
     this.childComponent.someFunction();
  }
}
2 голосов
/ 18 апреля 2019

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

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

0 голосов
/ 18 апреля 2019

Как говорят другие, вы можете использовать @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, у вас будет напечатано «Действие с идентификатором 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();
    }
0 голосов
/ 18 апреля 2019

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

...