Angular ControlValueAccessor未检测到更改-角度2

我已经实现了ControlValueAccessor，如下面的教程所示。但是，我实现controlvalueaccessor的组件似乎没有检测到ngModel的任何更改。我错过什么了吗

import { Component, OnInit, forwardRef } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';

@Component({
    selector: 'app-counter',
    templateUrl: './counter.component.html',
    styleUrls: ['./counter.component.css'],
    providers: [
        {
            provide: NG_VALUE_ACCESSOR,
            useExisting: forwardRef(() => CounterComponent),
            multi: true
        }
    ]
})
export class CounterComponent implements OnInit, ControlValueAccessor {

    constructor() { }

    counterValue = 0;

    writeValue(value: any) {
        console.log('writeValue: ', value);
    }

    registerOnChange(fn: any) {
        console.log('on change: ', fn);
    }

    registerOnTouched(fn: any) {
        console.log('on touch: ', fn);
    }

    increment() {
        this.counterValue++;
    }

    decrement() {
        this.counterValue--;
    }

    ngOnInit() {
    }

}

模板：

<button (click)="increment()">Increment</button>
{{ counterValue }}
<button (click)="decrement()">Decrement</button>

增量
{{counterValue}}
减量

以及：

ngModel:{{counter}}

---

在本教程的这一点上，递增/递减计数器应该会触发我定义的controlvalueaccessor方法，但它不是。您必须注册更改。这样做：

import {Component, OnInit, forwardRef} from '@angular/core';
import {ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms';

@Component({
    selector: 'app-counter',
    template: `
        <button (click)="increment()">Increment</button>
        {{ counterValue }}
        <button (click)="decrement()">Decrement</button>
    `,
    providers: [
        {
            provide: NG_VALUE_ACCESSOR,
            useExisting: forwardRef(() => CounterComponent),
            multi: true
        }
    ]
})
export class CounterComponent implements ControlValueAccessor {

    constructor() { }

    counterValue = 0;

    writeValue(value: any) {
        this.counterValue = value;
    }

    registerOnChange(fn: any) {
        this.onChangeCallback = fn;
    }

    private onChangeCallback: (_: any) => void = () => {};


    registerOnTouched(fn: any) {
        console.log('on touch: ', fn);
    }

    increment() {
        this.counterValue++;
        this.onChangeCallback(this.counterValue);
    }

    decrement() {
        this.counterValue--;
        this.onChangeCallback(this.counterValue);
    }    
}

从'@angular/core'导入{Component，OnInit，forwardRef}；
从'@angular/forms'导入{ControlValueAccessor，NG_VALUE_ACCESSOR}；
@组成部分({
选择器：“应用程序计数器”，
模板：`
增量
{{counterValue}}
减量
`,
供应商：[
{
提供：NG_值访问器，
useExisting:forwardRef（（）=>计数器组件），
多：真的
}
]
})
导出类计数器组件实现ControlValueAccessor{
构造函数（）{}
计数器值=0；
writeValue（值：任意）{
此值为.counterValue=value；
}
注册变更（fn：任何）{
this.onChangeCallback=fn；
}
private onChangeCallback:（（uu:any）=>void=（）=>{}；
注册人（fn：任何）{
console.log（'on touch:'，fn）；
}
增量（）{
这个.counterValue++；
this.onChangeCallback（this.counter值）；
}
减量{
这是对价；
this.onChangeCallback（this.counter值）；
}    
}

或使用setter的更优雅版本：

import {Component, OnInit, forwardRef} from '@angular/core';
import {ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms';

@Component({
    selector: 'app-counter',
    template: `
        <button (click)="increment()">Increment</button>
        {{ counterValue }}
        <button (click)="decrement()">Decrement</button>
    `,
    providers: [
        {
            provide: NG_VALUE_ACCESSOR,
            useExisting: forwardRef(() => CounterComponent),
            multi: true
        }
    ]
})
export class CounterComponent implements ControlValueAccessor {

    private _counterValue = 0;

    get counterValue(): number {
        return this._counterValue;
    }

    set counterValue(value: number) {
        this._counterValue = value;
        this.onChangeCallback(value);
    }

    writeValue(value: any) {
        this.counterValue = value;
    }

    registerOnChange(fn: any) {
        this.onChangeCallback = fn;
    }

    private onChangeCallback: (_: any) => void = () => {};


    registerOnTouched(fn: any) {
        console.log('on touch: ', fn);
    }

    increment() {
        this._counterValue++;
    }

    decrement() {
        this._counterValue--;
    }
}

从'@angular/core'导入{Component，OnInit，forwardRef}；
从'@angular/forms'导入{ControlValueAccessor，NG_VALUE_ACCESSOR}；
@组成部分({
选择器：“应用程序计数器”，
模板：`
增量
{{counterValue}}
减量
`,
供应商：[
{
提供：NG_值访问器，
useExisting:forwardRef（（）=>计数器组件），
多：真的
}
]
})
导出类计数器组件实现ControlValueAccessor{
private _counterValue=0；
获取计数器值（）：编号{
返回此值。\u计数器值；
}
设置计数器值（值：数字）{
此值为.\u counterValue=value；
这个.onChangeCallback（值）；
}
writeValue（值：任意）{
此值为.counterValue=value；
}
注册变更（fn：任何）{
this.onChangeCallback=fn；
}
private onChangeCallback:（（uu:any）=>void=（）=>{}；
注册人（fn：任何）{
console.log（'on touch:'，fn）；
}
增量（）{
这个._counterValue++；
}
减量{
这个._反价值--；
}
}

---

PS:别忘了用

writeValue（）

中的传入值更新内部模型，如两个示例所示。

有效，但使用这个.counterValue++进行递增/递减。谢谢。这对我今天很有帮助！谢谢@Alex

import {Component, OnInit, forwardRef} from '@angular/core';
import {ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms';

@Component({
    selector: 'app-counter',
    template: `
        <button (click)="increment()">Increment</button>
        {{ counterValue }}
        <button (click)="decrement()">Decrement</button>
    `,
    providers: [
        {
            provide: NG_VALUE_ACCESSOR,
            useExisting: forwardRef(() => CounterComponent),
            multi: true
        }
    ]
})
export class CounterComponent implements ControlValueAccessor {

    private _counterValue = 0;

    get counterValue(): number {
        return this._counterValue;
    }

    set counterValue(value: number) {
        this._counterValue = value;
        this.onChangeCallback(value);
    }

    writeValue(value: any) {
        this.counterValue = value;
    }

    registerOnChange(fn: any) {
        this.onChangeCallback = fn;
    }

    private onChangeCallback: (_: any) => void = () => {};


    registerOnTouched(fn: any) {
        console.log('on touch: ', fn);
    }

    increment() {
        this._counterValue++;
    }

    decrement() {
        this._counterValue--;
    }
}