【问题标题】：Angular communication between two components两个组件之间的角度通信
【发布时间】：2018-10-31 12:31:33
【问题描述】：

我正在使用 Angular 版本 6 构建一个简单的基于 Web 的应用程序。

在我的应用程序中有一个包含子组件的组件。此组件中有一个函数（在父组件中，而不是子组件中。）我想使用子组件中的按钮调用该函数。

这张图片解释了我的组件的格式。

我认为它与角度 @Output 有关。但我无法管理它。

这就是我的代码的组织方式。

父组件 - component.ts 文件

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-teacher-home',
  templateUrl: './teacher-home.component.html',
  styleUrls: ['./teacher-home.component.scss']
})
export class TeacherHomeComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

  formView: boolean = false;

  toggleForm(){
    this.formView = !this.formView;
  }
}

父组件 - component.html 文件

<div>
    <child-compnent></child-compnent>
</div>

子组件 - component.html 文件

<div>
    <button>Toggle Form view</button>
</div>

当点击子组件中的按钮时，我想调用父组件的函数toggleForm()。

【问题讨论】：

检查 Angular 文档，特别是 Component Interaction 部分。另外，在询问之前做一些研究，一次搜索就会返回一堆涵盖您的用例的答案......

标签： javascript angular typescript components

【解决方案1】：

阅读这篇文章：Understanding @Output and EventEmitter in Angular

子组件：

@Component({
  selector: 'app-child',
  template: `<button (click)="sendToParent('hi')" >sendToParent</button> `
})
export class AppChildComponent {
  @Output() childToParent = new EventEmitter;

  sendToParent(name){
    this.childToParent.emit(name);
  }
}

父组件：

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  toggle(){
    console.log('toggle')
  }

}

父 html：

<app-child (childToParent)="toggle($event)"></app-child>

工作DEMO

【讨论】：

当我创建 @Output 发射器时，它会在 “预期 0 类型参数但得到 1”中给出错误
试试@Output() childToParent = new EventEmitter;
我正在使用 Angular 6
它的工作.. 非常感谢你......我真的很感谢你的帮助

【解决方案2】：

您有几种方法可以做到这一点：

就是在子组件内部创建一个事件，然后给它一个回调，像这样：

@Output('eventName') buttonPressed = new EventEmitter();

并在您希望触发事件时调用buttonPressed.emit()

在父端它看起来像这样：

<div>
    <child-compnent (eventName)="toggleForm()"></child-compnent>
</div>

另一种方法是创建一个共享服务，其中包含两个组件的共享功能和数据

【讨论】：

它的工作......非常感谢你......我真的很感谢你的帮助

【解决方案3】：

您需要在您的子组件中使用@Output 装饰器，并在您的子组件中单击当前按钮时发出一个事件。

例如：-

子组件.html

<div>
    <button (click)="childButtonClicked()">Toggle Form view</button>
</div>

子组件.ts

export class ChildComponent {
  @Output triggerToggle: EventEmitter<any> = new EventEmitter<any>();

  ...
   childButtonClicked() {
     this.triggerToggle.emit(true);
   }
  ...
}

父组件

<div>
    <child-compnent (triggerToggle)="toggleForm()"></child-compnent>
</div>

【讨论】：

【解决方案4】：

您可以使用 EventEmitter of angular 来监听来自您的子组件的事件。

parent.component.ts

toggleForm($event) {}

parent.component.html

<div>
    <child-compnent  (trigger)="toggleForm($event)" ></child-compnent>
</div>

child.component.ts

@Output() trigger : EventEmitter<any> = new EventEmitter<any>();

buttonClick(){
  this.trigger.emit('click');
}

【讨论】：