Bagaimanakah Saya Boleh Berkomunikasi Antara Komponen Adik Beradik dalam Sudut 2?

Komunikasi Komponen Angular 2 Sibling

Komponen adik-beradik tidak mempunyai akses kepada sifat dan kaedah masing-masing. Artikel ini meneroka mekanisme mudah untuk komunikasi antara komponen adik-beradik dalam Angular 2, menggunakan perkhidmatan kongsi.

Pendekatan Perkhidmatan Kongsi

1. Perkhidmatan Kongsi:

Buat perkhidmatan kongsi untuk bertindak sebagai hab komunikasi.

@Injectable()
export class SharedService {
    dataArray: string[] = [];

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

2. Komponen Induk:

Import dan sediakan perkhidmatan kongsi dalam komponen induk.

import {SharedService} from './shared.service';
@Component({
    selector: 'parent-component',
    template: `<child-component></child-component>
               <child-sibling-component></child-sibling-component>`,
    providers: [SharedService]
})
export class ParentComponent { }

3. Komponen Kanak-kanak:

Suntikan perkhidmatan yang dikongsi ke dalam kedua-dua komponen adik-beradik:

Komponen Kanak-kanak 1:

import {SharedService} from './shared.service'
@Component({
    selector: 'child-component',
    template: `...`
})
export class ChildComponent implements OnInit {
    data: string[] = [];
    constructor(private _sharedService: SharedService) { }
}

Kanak-kanak Komponen 2 (Adik beradik):

import {SharedService} from './shared.service'
@Component({
    selector: 'child-sibling-component',
    template: `...`
})
export class ChildSiblingComponent {
    data: string = 'Testing data';
    constructor(private _sharedService: SharedService) { }
}

4. Perkongsian Data:

Komponen adik-beradik boleh mengubah suai tatasusunan data perkhidmatan kongsi, yang akan ditunjukkan dalam komponen adik-beradik yang lain.

addData() {
    this._sharedService.insertData(this.data);
    this.data = '';
}

Nota:

• Sertakan pembekal perkhidmatan yang dikongsi hanya dalam komponen induk untuk mengelak daripada mencipta berbilang contoh.
• Import dan suntikan perkhidmatan ke dalam komponen adik-beradik.
• Kemas kini penyataan import untuk versi Angular 2 yang lebih tinggi daripada beta.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Berkomunikasi Antara Komponen Adik Beradik dalam Sudut 2?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!