Angular - Refre sh компонент из другого компонента: дочерний элемент для родительского, затем родительский для другого дочернего сообщения

Question

как я могу обновить sh компонент из другого компонента, используя @Output декоратор?

в моем случае мне нужно обновить sh компонент C из компонент B => on (click) = "uploadMenu ()

Parent : component A Child1 : component B Child2 : component C

Компонент A (родительский) html

<div class="row">
      <div class="col-6">
        <app-uploadmenus></app-uploadmenus>
      </div>
</div>

<div class="row">
      <div class="col-6">
        <app-listemenus></app-listemenus>
      </div>
</div>

Компонент B (дочерний) html

<button class="btn btn-success" (click)="uploadMenu()">

Компонент B (дочерний) TS <== действие </p>

uploadMenu() {

  this.appService.insertMenuSql(this.downloadurl, this.filename).subscribe((data) => {

      this.message = data["msessage"];

      //action here

    }, error => console.log(error));
  }

Компонент C (дочерний) TS <== цель для обновления sh</p>

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

//???

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

  constructor() { }

  ngOnInit() {
  }


}

Answer 1

Используйте EventEmitter в дочернем элементе B для выполнения функции в родительском элементе A, который затем использует ViewChild в A для выполнения функции в дочернем C.

easy peasy.

компонент A должен выглядеть так:

<div class="row">
  <div class="col-6">
    <app-uploadmenus (messageEvent)="uploadMenuPressed($event)"></app-uploadmenus>
  </div>
</div>

<div class="row">
  <div class="col-6">
    <app-listemenus></app-listemenus>
  </div>
</div>

компонент B Требуются следующие 3 вещи:

import { Output, EventEmitter } from '@angular/core';
@Output() messageEvent = new EventEmitter<string>();

buttonPressed() {
  this.messageEvent.emit('done');
}

компонент C потребности:

refreshMenu() {
  //do something here
}

наконец, компонент A нуждается в дочернем представлении и функции для принятия вызова emit

import { ViewChild } from '@angular/core';
import { CComponent } from ...
@ViewChild(CComponent) cComponent: CComponent;

uploadMenuPressed(event:string) {
  this.cComponent.refreshMenu();
}

, который должен это сделать. удачи!