Bagaimanakah komponen adik-beradik boleh berkomunikasi dalam Angular 2?

Komunikasi Komponen Sudut 2 Antara Adik Beradik

Dalam Angular 2, komunikasi komponen adik beradik boleh dicapai melalui suntikan pergantungan dan perkhidmatan kongsi.

Pendekatan Perkhidmatan Kongsi (Angular 2 RC4 dan Kemudian)

Pendekatan yang disyorkan melibatkan mewujudkan perkhidmatan kongsi yang boleh diakses oleh komponen adik-beradik melalui suntikan pergantungan. Berikut ialah contoh:

// shared.service.ts
@Injectable()
export class SharedService {
  dataArray: string[] = [];

  insertData(data: string) {
    this.dataArray.unshift(data);
  }
}

Komponen Induk:

// parent.component.ts
@Component({
  providers: [SharedService],
  directives: [ChildComponent, ChildSiblingComponent]
})
export class parentComponent { }

Komponen Adik Beradik:

// child.component.ts
constructor(private _sharedService: SharedService) { }
ngOnInit(): void {
  this.data = this._sharedService.dataArray;
}

// child-sibling.component.ts
constructor(private _sharedService: SharedService) {}
addData() {
  this._sharedService.insertData(this.data);
  this.data = '';
}

Kebaikan ini Kaedah:

• Mudah untuk dilaksanakan
• Menyokong komunikasi terus antara komponen adik-beradik tanpa memerlukan pemancar peristiwa atau $rootScope.$broadcast
• Membolehkan untuk perkongsian data antara berbilang komponen

Nota:

• Sediakan perkhidmatan dalam komponen induk sahaja, tetapi importnya dalam kedua-dua komponen anak.

Atas ialah kandungan terperinci Bagaimanakah komponen adik-beradik boleh berkomunikasi dalam Angular 2?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!