Rumah > hujung hadapan web > tutorial js > Bagaimanakah komponen adik-beradik boleh berkomunikasi dalam Angular 2?

Bagaimanakah komponen adik-beradik boleh berkomunikasi dalam Angular 2?

Patricia Arquette
Lepaskan: 2024-11-30 04:51:10
asal
361 orang telah melayarinya

How can sibling components communicate in 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);
  }
}
Salin selepas log masuk

Komponen Induk:

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

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 = '';
}
Salin selepas log masuk

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!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan