Question

我有三个同级组件，它们使用以下相同的组件填充。

 <div *ngIf="unitLevel && tribeLevel && squadLevel">
      <at-unit-search [level]="unitLevel"></at-unit-search>
      <at-unit-search [level]="tribeLevel"></at-unit-search>
      <at-unit-search [level]="squadLevel"></at-unit-search>
 </div>

我需要将一些数据从第一个兄弟姐妹传递到第三个兄弟姐妹，而不是第二个兄弟姐妹，为此我使用了一种服务。但是它将数据发送到所有三个组件。

单元搜索组件的打字稿

export class UnitSearchComponent implements OnInit {
  operationalUnits: OperationalUnitLightWeight[];
  previousTimeAllSelected: boolean;
  @ViewChild('allSelected', { static: false }) private allSelected: MatOption;
  @Input() level: any;
  unitForm = new FormGroup({ unitControl: new FormControl('') });

  childUnits : any[];

  constructor(private commonServerService: CommonServerService,private sendUnitService: UnitService ) {
    this.childUnits=[];
  }

  ngOnInit() {

    this.commonServerService.findOperationalUnitsByLevelId(this.level.id).subscribe(operationalUnits => {
      {
        this.operationalUnits = operationalUnits;
        this.operationalUnits.sort((a , b) => a.name.localeCompare(b.name));
      }
    });

    this.sendUnitService.getArray().subscribe(units => {
     this.operationalUnits = units
    });

  }


  optionChange() {
    this.unitForm.controls.unitControl.value.forEach(id => {
      {
        if (id === 0) {
          this.previousTimeAllSelected = true;
        }
      }
    });
    let selectedUnitIds = this.toggleAllSelection();
    this.getChildUnits(selectedUnitIds);
  }

   getChildUnits(selectedUnitIds: any[]) {
    let children=  this.loadChildUnits(selectedUnitIds);
    this.sendUnitService.sendArray(children);
  }

之所以发生这种情况，是因为所有三个组件都是从同一基本组件生成的。由于每个组件都有getArray()内部的ngOnInit()方法，因此，当从特定组件发送数据时，所有三个组件都将接收该数据。

有什么方法可以仅将数据唯一地发送到所需的组件吗？

谢谢。

Answer 1

嘿，您可以为此在全球服务中定义全局变量，

     //assuming that senUnitService is a global service.

     this.sendUnitService.unitLevel = unitLevel;
     this.sendUnitService.tribeLevel= tribeLevel;
     this.sendUnitService.squadLevel= squadLevel;

     //and if then in the sibling component 

     this.unitLevel = this.sendUnitService.unitLevel;
     this.tribeLevel = this.sendUnitService.tribeLevel;
     this.squadLevel = this.sendUnitService.squadLevel;

Answer 2

嗨，欢迎来到StackOverflow。

有不同的可能解决方案，但这取决于您的需求。

如果第三个孩子“永远”是唯一对通知感兴趣的孩子，我将传递一个输入。

<div *ngIf="unitLevel && tribeLevel && squadLevel">
      <at-unit-search [level]="unitLevel"></at-unit-search>
      <at-unit-search [level]="tribeLevel"></at-unit-search>
      <at-unit-search [level]="squadLevel" handleNotification="true"></at-unit-search>
</div>

和ngOnInit中的

if(this.handleNotification) {
    this.sendUnitService.getArray().subscribe(units => {
     this.operationalUnits = units
    });
}

如果相反，有一种方法可以过滤sendUnitService发出的数据，则可以使用

    this.sendUnitService.getArray().pipe(
       filter(x => .....),
       ....
     ).subscribe(units => {
       this.operationalUnits = units
     });

如果两种方法都不符合您的需求，我将在服务中添加一些登录信息，以允许组件的实例“注册”特定的通知。

PS。最好有一个最低限度的运行示例（我建议使用StackBlitz）

如何将数据传递到同级组件？

2 个答案: