3

有一个自定义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函数只是在加载时被触发，之后根本不会被触发。

4

1 回答 1

2

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

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

Plunker 示例

因此，每当您想更新 ngControl 的值时，ControlValueAccessor都应该调用您在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

于 2017-05-30T12:08:48.247 回答