Angular 5 - EventEmitter 只发送一次数据答案

【问题标题】：Angular 5 - EventEmitter is sending data only onceAngular 5 - EventEmitter 只发送一次数据
【发布时间】：2019-03-26 20:09:20
【问题描述】：

我正在构建一个仪表板来管理公司内部的用户。那家公司有不同数量的部门和这些部门内的一堆子弟，所以我有一个自定义的递归树视图来显示它们之间的关联。

现在，当我单击树的某个分支时，我需要从树中向父组件发送一个标识该部门/子女 (cd) 的数字，其中显示相关工作人员和有关他们的数据。在父组件中，该编号用于从数据库中获取与该部门/子女相关的所有数据。

为此，我在论坛中看到我可以使用 @Input / @Output 装饰器和 EventEmitter。它有效，但只有一次。当我单击另一个分支时，接收 cd 的方法（称为 receiveNode() ）不会更新，并且仅适用于第一个分支。这不是所需的行为。

为了测试，在发出 CD 变量的相同方法中，我将分支的 CD 登录到控制台。我可以看到每次单击分支时都可以记录 CD 变量，但只能通过 Event Emitter 发送一次

tree.component.ts（子）

import { Component, OnInit, Output, EventEmitter } from '@angular/core';
import { Input } from '@angular/core';
import { TreeNode } from '../../interfaces/tree-node';

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

  @Input() treeData: TreeNode[];

  // Enviar CD do organigrama para o BuildOrganigComponent
  @Output() eventEmitter: EventEmitter<number> = new EventEmitter();
  nome: string;

  constructor() {  }

  ngOnInit() { }

  toggleChild(node) { node.showChildren = !node.showChildren; }

  sendNode(cd) {
    console.log(cd);
    this.eventEmitter.emit(cd);
  }
}

tree.component.html

<ul *ngIf="treeData">
  <li *ngFor="let node of treeData">
    <span *ngIf="node.children != 0">
      <i (click)="toggleChild(node)" id="seta-direita" class="fas fa-angle-right fa-fw"></i>
    </span>
    <span id="row" (click)="sendNode(node.cd)">{{ node.nome }}</span>
    <app-tree *ngIf="!node.showChildren" [treeData]="node.children"></app-tree>
  </li>  
</ul>

funcion.component.ts

  receiveNode(e) {
    console.log(e);
  }

funcion.component.html

 <div class="overflow" style="margin-left: -5% !important;">
        <app-tree [treeData]='nodes' (eventEmitter)='receiveNode($event)'></app-tree>
    </div>

funcion.html 和 funcion.ts 很大，所以只放重要的东西。如果需要查看整个代码，请告诉我。

一些图片

在第二张图片中，我们可以看到来自树组件和函数组件的日志，但是之后，无论我点击哪里，它都不会调用函数组件中的方法。

可能有什么问题？任何帮助表示赞赏

【问题讨论】：

您是否尝试在其自己的模板中使用该组件？我认为这不是一个好主意，甚至不是有效的？
这是一种递归方式......至少，据我所知。我在互联网上找到并工作至今。但如果我想一想，感觉“错了”：/
它可能会使您的应用程序调用循环！我不建议这样做。为什么不创建单独的父组件和子组件并尝试？通过这样做，您将很容易理解数据流。您甚至可以在函数上设置断点，查看执行的函数或代码行以及何时执行，这将消除您的所有疑虑！
嗯，好的，我去看看。也许我应该考虑并重新设计整个树组件。谢谢

标签： angular html eventemitter angular-event-emitter

【解决方案1】：

我设法通过共享服务而不是 @Input 和 @Output 装饰器传递数据来使其工作。现在它更简单、更清晰、更容易理解！

data.service.ts

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';

@Injectable()
export class DataService {

  private cdSource = new BehaviorSubject<number>(1);
  currentCD = this.cdSource.asObservable();

  constructor() { }

  changeCD(m: number) {
    this.cdSource.next(m);
  }

}

child.component.ts

// Called everythime treeview is clicked
sendNode(cd: number) {
  this.dataService.changeCD(cd);
}

parent.component.ts

 // Update methods when dataService changes values
    this.dataService.currentCD.subscribe(message => {
      this.preencheGrafico(message);
      this.preencheDadosIniciais(message);
      this.preencheTabela(message);
  });
}

像魅力一样工作，没有任何缺陷！

基于此tutorial

【讨论】：