Угловая связь между двумя компонентами

Question

Я создаю простое веб-приложение с использованием angular.

Есть два компонента. Один компонент является дочерним компонентом другого компонента. В дочернем компоненте есть кнопка. Я хочу вызвать функцию родительского компонента, когда нажимаю на кнопку, которая находится в дочернем компоненте. Как я могу это сделать.

Я думаю, что это касается угловых @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() родительского компонента при нажатии кнопки, которая находится в дочернем компоненте.

Answer 1

Вы можете использовать EventEmitter 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');
}

Answer 2

У вас есть несколько способов сделать это:

1. Создает событие внутри дочернего компонента, а затем возвращает его, примерно так:

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

и позвоните buttonPressed.emit(), если хотите, чтобы событие было вызвано

на родительской стороне это будет выглядеть так:

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

2. Другой способ - создать общую службу, которая будет содержать общие функции и данные для обоих компонентов

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

Answer 4

прочитайте эту статью: Понимание @Output и EventEmitter в 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>

работает ДЕМО