时间戳

首页 > 解决方案 > Angular - 从其他组件刷新组件：子到父然后父到另一个子通信

angular - Angular - 从其他组件刷新组件：子到父然后父到另一个子通信

问题描述

如何使用@Output装饰器从另一个组件刷新组件？

就我而言，我需要在 (click)="uploadMenu() 上从组件 B => 刷新组件 C

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<== 动作

uploadMenu() {

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

      this.message = data["msessage"];

      //action here

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

组件 C (child) TS<== 要刷新的目标

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() {
  }


}

标签： angular

解决方案

在子 B 中使用EventEmittera 在父 A 中执行函数，然后在 A 中使用 aViewChild在子 C 中执行函数。

十分简单。

组件 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 需要一个子视图和一个函数来接受发出调用

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

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

应该这样做。祝你好运！

推荐阅读