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组件。

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

comp 是 add-files 组件创建的对象。

我在互联网上进行了一些研究，发现我们可以使用 @input/@output 装饰器和 event emitters 来实现这一点。

我是 Angular 的新手。谁能建议我这种方法来如何在Angular中使用event emitters和@input/@output触发不同组件的函数？

提前致谢！

Answer 1

您可以使用 ViewChild 装饰器调用子组件类。

// 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>

你可以玩here.