взаимодействие компонентов в Angular 8

Question

У меня есть два компонента в angular8. 1) add-files component 2) Discussion Component.

В компоненте обсуждения у меня есть одна кнопка (см. Ниже)

<app-add-files></app-add-files>

<div class="col-12 col-sm-6 col-lg-6">
            <input type="submit" value="Send" (click)="removeitems()" class="greenBtn float-right addCommentsBtn"
              [disabled]="commentForm.pristine || commentForm.invalid" onclick="closeCommnetPopupBox()">
          </div>

Я хочу вызвать функцию removedoc(), определенную в компоненте add-files всякий раз, когда я нажимал на кнопку, определенную в компоненте обсуждения.

я пытался использовать следующий подход.

Я импортирую компонент add-files в компонент обсуждения и создавал объект то же самое, а затем вызов функции из компонента обсуждения в компонент add-files.

removeitems()
{
 this.comp.removedoc();
}

comp - это объект, созданный из компонента add-files.

Я занимался некоторыми исследованиями inte rnet и обнаружили, что мы можем достичь этого с помощью @input/@output декораторов с event emitters.

Я новичок в Angular. Может кто-нибудь предложить мне этот подход к тому, как вызвать функцию формы различных компонентов, используя event emitters с @input/@output в Angular?

Заранее спасибо!

Answer 1

Вы можете вызвать класс дочернего компонента, используя ViewChild decorator.

// Inside parent component.
@ViewChild('mychild') childComponent: Component2;
  onButtonClick() {

   // Exceute the function of child class.
   console.log( this.childComponent.method1());
  }

// On parent component html.
<component2 #mychild></component2>

Вы можете поиграть с ним здесь.