Wie zwei Komponenten kommunizieren, in Winkel 2?

Question

Ich schrieb zwei Komponenten, wie folgt:

1. DynSelectionComponent.ts (generic select-Tag, weil der select-Tag nicht Multi-Select, Filter nicht unterstützt, so dass diese Komponente verwendet ng2-selet).
2. user-list.component.ts (diese Komponente entspricht der HTML-Vorlage mit DynSelectionComponent und bietet eine Sammlung für DynSelectionComponent, die als Option angezeigt wird).

DynSelectionComponent.ts

import { Component, OnInit, ViewEncapsulation, Input, SimpleChanges } from '@angular/core'; 

@Component({ 
    selector: 'dyn-selection', 
    template: ` 
    <ng-select [allowClear]="true" 
       [items]="items" 
       [disabled]="disabled" 
       (data)="refreshValue($event)" 
       (selected)="selected($event)" 
       (removed)="removed($event)" 
       (typed)="typed($event)" 
       [placeholder]="placeholder"> 
    </ng-select> 
    `, 
}) 

export class DynSelectionComponent implements OnInit { 
    @Input() inputItems: any[];//The other components are passed over the collection 

    private value: any = {}; 
    private disabled: boolean = false; 
    private placeholder: string = ''; 
    items: Array<any> = []; 

    ngOnChanges(changes: SimpleChanges) { 
     let newItems: any[] = []; 
     for (let propName in changes) { 
      if (propName == 'inputItems') { 
       this.inputItems.forEach((compay: { companyId: string, companyName: string }) => { 
        newItems.push({ 
         id: compay.companyId, 
         text: `${compay.companyName}` 
        }); 
       }); 
       this.items = newItems; 
      } 
     } 
    } 

    public selected(value: any): void { 
     console.log('Selected value is: ', value); 
    } 
    public removed(value: any): void { 
     console.log('Removed value is: ', value); 
    } 
    public typed(value: any): void { 
     console.log('New search input: ', value); 
    } 
    public refreshValue(value: any): void { 
     this.value = value; 
    } 
} 

benutzer list.html (Diese Datei verwendet DynSelectionComponent)

<dyn-selection [inputItems]='companies' name="companyId" id="companyId"></dyn-selection> 

benutzer list.component.ts (Diese Komponente weist den Unternehmen einen Wert zu Immobilien)

getCompanies(){   
    var url = "/api/company/queryCompany"; 
    this.httpPlus.post(url, { 
     data:"c" 
    }).subscribe((data: any) => { 
     this.companies = data.data; 
    }, (err)=> { 
     this.companies = []; 
    }); 
} 

Dieses Mal kann benutzer list.html Datei normalerweise DynSelectionComponent Komponente, die normale Anzeige Unternehmen Sammlung verwenden.

Wenn jedoch die Onchange Ereignis auslöst, wie funktioniert die benutzer list.component.ts Komponente der modifizierte Wert von CompanyID bekommen?

Was soll ich tun? Danke für Ihre Antwort.

Answer 1

Komponenten können auf zwei Arten kommunizieren 1. Eltern-Kind-Beziehung. über @Input, @output und eventemitter 2. Durch Shared-Service.

https://angular.io/docs/ts/latest/cookbook/component-communication.html

Wenn Sie komplexe Bogen haben, dann können Sie NGRX/Speicher verwenden.

Answer 2

DynSelectionComponent.ts den folgenden Code

@Output("ValueOnChange") 
ValueOnChange:EventEmitter<SelectItem> = new EventEmitter<SelectItem>(); 

Wenn die NG2-Auswahlwert Änderungen hinzufügen:

public refreshValue(value: any): void { 
    this.ValueOnChange.emit(value); 
} 

Empfänger: Benutzer-list.html (Bindung ValueOnChange Ereignis)

<dyn-selection [inputItems]='companies' (companyIdChange)="ValueOnChange($event)"></dyn-selection> 

Empfänger: user-list.component.ts

ValueOnChange(company: SelectItem){ 
    console.log("The received value is: " + company.id); 
}