两个相同级别组件之间的交换引用。

Question

我有两个custom-component，它们是由一个具有不同数据的公共父级生成的，作为mat-tab-group上的两个选项卡。

<mat-tab-group>
  <mat-tab label="TAB1">
    <ng-template matTabContent>
      <custom-component [data]="tab1data"></custom-component>
    </ng-template>
  </mat-tab>
  <mat-tab label="TAB2">
    <ng-template matTabContent>
      <custom-component [data]="tab2data"></custom-component>
    </ng-template>
  </mat-tab>
</mat-tab-group>

data是一个设置内部_data并将其封装在MatTableDataSource中的设置器：

@Input()
set data(val: Data[]) {
    this._data = val;
    this.loadData();
}

loadData(): void {
    this.dataSource = new MatTableDataSource<Data>(this._data);
    this.dataSource.sort = this.sort;
}

在第一个选项卡上，组件的操作应该会影响到其他选项卡上的数据。是否有任何方法传递组件引用，以便更改_data并从其他组件调用loadData()？

Answer 1

您可以使用Rxjs可观察到的数据来完成这一任务。

下面是如何在两个组件https://stackblitz.com/edit/angular-ivy-myr2kh之间进行通信的stackblitz示例

my-service.service.ts

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

@Injectable()
export class MyServiceService {
  private dataChangeObservable = new Subject<any>();
    dataChangeStream = this.dataChangeObservable.asObservable();

  constructor() { }

  emitDataChange() {
    this.dataChangeObservable.next();
  }
}

ComponentOne.component.ts

onclickDiv() {
    this.myService.emitDataChange(); // Here you are triggering for change
}

ComponentTwo.component.ts

ngOnInit() {
    this.dataChangeSubscription$ = this.myService.dataChangeStream.subscribe(() => {
       this.count++; // Here you will get notified/listener of change
    })
 }

更新

如果您有相同的组件实例，那么您必须传递一些值来确定应该更新哪个实例。

喜欢

https://stackblitz.com/edit/angular-ivy-4pznor

您的父html

<app-componentone [name]="'one'"></app-componentone>
<app-componentone [name]="'two'"></app-componentone>

在这里，one和two作为输入传递来标识实例

然后你的ts

import { Component, OnInit, Input } from '@angular/core';
import { MyServiceService } from '../my-service.service';

@Component({
   selector: 'app-componentone',
   templateUrl: './componentone.component.html',
   styleUrls: ['./componentone.component.css']
})
export class ComponentoneComponent implements OnInit {
  @Input() name; // it will have instance name
  count = 0;
  constructor(
     private myService: MyServiceService
  ) { }

  ngOnInit() {
    this.myService.dataChangeStream.subscribe((value) => { // here we will get to notify which instance should get updated
      if (this.name !== value) { // Here we checking for instance name for updating, if same component instance don't do anything else update
         this.count++;
      }
    })
  }

  onclickDiv() {
    // Here I am passing parameter, so if click is triggered from instance one, we have to update other instances, so passing parameter 'one' i.e. name, to avoid updating same component instance

    this.myService.emitDataChange(this.name);
  }
}

Answer 2

从第一个选项卡，您可以在dataChange上向其父组件发出输出。

在自定义组件中，有一个输出，如

@Output() public dataChange = new EventEmitter();

在数据更改时，发出此事件如下：

this.dataChange.emit('changed data');

在此组件的选择器所在的父组件中，将选择器更改为：

HTML :-

<custom-component [data]="tab1data" (dataChange)="modifyDataTab2($event)"></custom-component>

TS :-

modifyDataTab2(firstTabData) {
   this.tab2Data = firstTabData;
   // or you can make other changes.
} 

现在，由于tab2已经将tab2Data作为输入，您的loadData()将自动被调用。

如果要修改选项卡2上的tab1数据，则不需要再次更改选项卡组件，每个实例都会有自己的输出。更改将只发生在父级。这将是：

HTML :-

<custom-component [data]="tab2data" (dataChange)="modifyDataTab1($event)"></custom-component>

TS :-

modifyDataTab1(secondTabData) {
   this.tab1Data = secondTabData;
   // or you can make other changes.
} 

这就是有一个共同的父母的好处。如果两个孩子想要沟通，他们应该通过父母进行交流。因为父类中作为输入传递的任何数据更改都将自动触发子元素所需的更改。