Question

我写了两个组件，如下：

DynSelectionComponent.ts （通用选择标记，因为select标记不支持多选，过滤，因此该组件使用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的修改值？

我该怎么办？谢谢你的回复。

Answer 1

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

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

如果您有复杂的拱形，那么您可以使用ngrx / store。

Answer 2

DynSelectionComponent.ts 添加以下代码

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

当ng2选择值改变时：

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

receiver：user-list.html（绑定ValueOnChange事件）

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

receiver：user-list.component.ts

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

两个组件如何以角度2进行通信？

2 个答案: