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

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

В моем приложении есть компонент, у которого есть дочерний компонент. В этом компоненте есть функция (в родительском компоненте, а не в дочернем компоненте.), И я хочу вызвать эту функцию с помощью кнопки, которая находится в дочернем компоненте.

Это изображение объясняет формат моих компонентов.

enter image description here

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

Проверьте документацию Угловой, особенно раздел Взаимодействие компонентов. Кроме того, проведите небольшое исследование, прежде чем спрашивать, один поиск дал бы кучу ответов, которые охватывают ваш вариант использования ...

miselking 31.10.2018 13:41
1
1
579
4
Перейти к ответу Данный вопрос помечен как решенный

Ответы 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>

рабочий ДЕМО

когда я создаю этот эмиттер @Output, он выдает ошибку в <any> «ожидаемых аргументов типа 0, но получено 1»

Buddhika Chathuranga 31.10.2018 13:42

попробуйте @Output() childToParent = new EventEmitter;

Fateme Fazli 31.10.2018 13:43

я использую угловой 6

Buddhika Chathuranga 31.10.2018 13:43

это сработало .. большое спасибо ... я очень признателен за вашу помощь

Buddhika Chathuranga 31.10.2018 14:07

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

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

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

и вызовите buttonPressed.emit(), когда хотите, чтобы событие запускалось

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

<div>
    <child-compnent (eventName)="toggleForm()"></child-compnent>
</div>
  1. Другой способ - создать общий сервис, который будет содержать общие функции и данные для обоих компонентов.

это сработало .. большое спасибо ... я очень признателен за вашу помощь

Buddhika Chathuranga 31.10.2018 14:08

Вам нужно использовать декоратор @Output внутри вашего дочернего компонента и испускают - событие, когда текущая кнопка нажата внутри вашего дочернего компонента.

Например: -

Дочерний component.html

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

Дочерний component.ts

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

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

Родительский компонент

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

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

Другие вопросы по теме