Question

我正在建立一个仪表板来管理公司内部的用户。该公司有不同数量的部门，并且这些部门中有很多孝顺，所以我有一个自定义的递归树形视图来显示这些部门之间的关联。

现在，当我单击树的某个分支时，我需要发送一个数字，以将树中的部门/孝子（ cd ）标识到父组件，并在其中显示相关工作人员及其相关数据。在父组件中，该数字用于从数据库中获取与该部门/孝顺相关的所有数据。

为此，我在论坛上阅读了可以使用 @Input / @Output 装饰器和 EventEmitter 的信息。它正在工作，但是只有一次。当我单击另一个分支时，接收 cd （称为 receiveNode（））的方法不会更新，仅在第一个分支中有效。这不是期望的行为。

为了进行测试，使用发出CD变量的相同方法，我将分支的CD登录到控制台。我可以看到每次单击分支时都可以记录CD变量，但是只能通过事件发射器发送一次

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很大，因此仅放置重要内容。如果需要查看整个代码，请告诉我。

一些图片

在第二张图片中，我们可以看到来自树组件和funcion组件的日志，但是无论单击什么位置，它都永远不会调用funcion组件中的方法。

可能是什么问题？感谢您的帮助

Answer 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

Angular 5-EventEmitter仅发送一次数据

1 个答案: