两个组件之间的角度通讯

Question

I'm building a simple web based application using angular version 6.

In my application there is a component which has a child component. There is a function in this component(In the parent component, not the child component.) and I want to invoke that function using a button which is in the child component.

This image explains the format of my components.

I think its regarding to angular @Output . But i can't manage it.

This is how my code has organized.

Parent Component - component.ts file

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;
  }
}

Parent component - component.html file

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

Child component - component.html file

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

i want to callthe function toggleForm() of parent component when the button clicked which is in child component.

Answer 1

read this article: Understanding @Output and EventEmitter in Angular

child component:

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

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

parent component:

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

}

parent html:

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

working DEMO

Answer 2

You have a couple of ways to do this :

1. Is to create an event inside the child component and then give it a callback, something like this:

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

and call buttonPressed.emit() when you want the event to be triggered

on the parent side it will look like this :

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

2. Another way is to create a shared service that will contain the shared functions and data for both components

Answer 3

You need to use @Output decorator inside your child component and emit an event when the button present clicked inside your child.

For eg: -

Child component.html

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

Child component.ts

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

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

Parent Component

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

Answer 4

You can use EventEmitter of angular to listen to events from your child component.

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');
}