Bagaimana untuk Melaksanakan Komunikasi Komponen Adik Beradik dalam Sudut 2?

Komunikasi Komponen Adik Beradik dalam Sudut 2

Apabila menguruskan aliran data antara komponen adik-beradik dalam Angular 2, terdapat beberapa pendekatan yang perlu dipertimbangkan.

Perkhidmatan Dikongsi dengan Suntikan Ketergantungan

Penyelesaian yang disyorkan dalam Angular 2 RC4 ialah menggunakan perkhidmatan kongsi melalui suntikan pergantungan. Berikut ialah pelaksanaannya:

shared.service.ts:

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

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

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

parent.component.ts (Komponen induk):

import {Component} from '@angular/core';
import {SharedService} from './shared.service';
import {ChildComponent} from './child.component';
import {ChildSiblingComponent} from './child-sibling.component';

@Component({
  selector: 'parent-component',
  template: `<h1 >Parent</h1>
        <div>
            <child-component></child-component>
            <child-sibling-component></child-sibling-component>
        </div>`,
  providers: [SharedService],
  directives: [ChildComponent, ChildSiblingComponent],
})
export class ParentComponent {} 

child.component.ts (komponen kanak-kanak):

import {Component, OnInit} from '@angular/core';
import {SharedService} from './shared.service';

@Component({
  selector: 'child-component',
  template: `<h1 >I am a child</h1>
        <div>
            <ul *ngFor="#data in data">
                <li>{{data}}</li>
            </ul>
        </div>`
})
export class ChildComponent implements OnInit {
  data: string[] = [];
  constructor(private _sharedService: SharedService) { }
  ngOnInit(): any { this.data = this._sharedService.dataArray; }
}

child-sibling.component.ts (komponen adik beradik kanak-kanak):

import {Component} from 'angular2/core';
import {SharedService} from './shared.service';

@Component({
  selector: 'child-sibling-component',
  template: `
          <h1 >I am a child</h1>
          <input type="text" [(ngModel)]="data"/>
          <button (click)="addData()"></button>`
})
export class ChildSiblingComponent {
  data: string = 'Testing data';
  constructor(private _sharedService: SharedService) {}
  addData() {
    this._sharedService.insertData(this.data);
    this.data = '';
  }
}

Pertimbangan Utama:

1. Pembekal perkhidmatan kongsi hanya harus dinyatakan dalam komponen induk, bukan komponen anak.
2. Komponen kanak-kanak masih perlu menyuntik dan mengimport perkhidmatan.
3. Jika mengubah suai daripada versi beta Angular 2 yang lebih awal, kemas kini penyata import sahaja.

Atas ialah kandungan terperinci Bagaimana untuk Melaksanakan Komunikasi Komponen Adik Beradik dalam Sudut 2?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!