angular - 在Angle 2自定义组件中一次调用了ControlValueAccessor类中的writeValue函数

有一个自定义的angular2组件，如下所示：
模板

<input class="form-control" id="searchbox" placeholder="شهر" (keyup)="search()" [(ngModel)]="name" autocomplete="off"/>
<div id="searchresult" *ngFor="let city of cities" (click)="cityselected(city)">
    {{city.name}}
</div>

成分

        @Component({
        moduleId: module.id,
        selector: 'city-search',
        templateUrl: './city-search.component.html',
        styleUrls: ['./city-search.component.css'],
        providers: [
            {
                provide: NG_VALUE_ACCESSOR,
                useExisting: forwardRef(() => CitySearchComponent),
                multi: true
            }
        ]
    })
    export class CitySearchComponent implements OnInit, ControlValueAccessor{

        cities: Array<City>;
        name: string;
        displaysearchbox: boolean;

        errorMessage: string;

        constructor(private cityService: CityService
, private helper : Helper) { }

        ngOnInit() {
            this.cities = new Array<City>();
            this.displaysearchbox = false;
        }

        search(): void {
            if (this.name) {
 this.cityService.
search(this.helper.arabictopersian(this.name))
.subscribe(
                    data => {
                        this.cities = data as Array<City>
                    }
                    , error => this.errorMessage = <any>error);
            }
        }

        cityselected(city: City): void {
            this.name = city.name;
        }
        writeValue(value: any) {   //just fire once to get the inital value
            if (value !== undefined) {
                this.name = value;
            }
            this.propagateChange(this.name);
        }
        propagateChange = (_: any) => { };

        registerOnChange(fn) {
            this.propagateChange = fn;
        }
        registerOnTouched() { }
    }

如代码组件类中所示，实现ControlValueAccessor
下面是我使用它的方法：

<form class="form-horizontal">
    <city-search id="bc" name="city" [(ngModel)]="city"></city-search>
    city:{{city}}<!--nothing happens -->
</form>

但自定义组件具有1-way binding而不是2-way binding。此组件获取初始值，但根本不会根据输入更改而更改..当我在浏览器上调试它时，writeValue函数只是在加载时触发，之后根本不会触发。

最佳答案

我想在选择新值时应该调用propagateChange方法

cityselected(city: any): void {
  this.name = city.name;
  this.propagateChange(this.name);
}

Plunker Example
因此，每当您想从ControlValueAccessor更新ngcontrol的值时，应该调用在registerOnChange方法中设置的函数

registerOnChange(fn) {
  this.propagateChange = fn;
}

通常这种方法称为onChange函数https://github.com/angular/angular/blob/4.2.0-rc.1/packages/forms/src/directives/default_value_accessor.ts#L79