两个组件如何以角度 2 通信？答案

【问题标题】：How two components communicate, in angular 2?两个组件如何以角度 2 通信？
【发布时间】：2017-06-08 15:34:14
【问题描述】：

我写了两个组件，如下：

DynSelectionComponent.ts（通用选择标签，因为选择标签不支持多选、过滤，所以本组件使用ng2-selet）。
user-list.component.ts（该组件对应使用 DynSelectionComponent 的 html 模板，并提供 DynSelectionComponent 的集合，显示为选项）。

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;
    }
}

user-list.html（此文件使用 DynSelectionComponent）

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

user-list.component.ts（此组件为公司属性分配一个值）

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

此时user-list.html文件可以正常使用DynSelectionComponent组件，正常显示公司集合。

但是，触发 onchange 事件时，user-list.component.ts 组件如何获取修改后的 companyId 值呢？

我该怎么办？感谢您的回复。

【问题讨论】：

companyId 修改后的值是多少？ onchange 似乎没有修改 companyId。
问题已经解决了，可以理解下。谢谢！

标签： angular components

【解决方案1】：

组件可以通过两种方式进行通信 1.父子关系。通过@Input、@output 和 eventemitter 2. 通过共享服务。

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

如果你有复杂的arch，那么你可以使用ngrx/store。

【讨论】：

感谢您的帮助，我用 EventEmitter 解决了这个问题！

【解决方案2】：

DynSelectionComponent.ts添加以下代码

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

ng2-select 值变化时：

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

接收者：user-list.html（绑定ValueOnChange事件）

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

接收者：user-list.component.ts

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

【讨论】：