Angular 2 RC2 单选按钮绑定损坏答案

【问题标题】：Angular 2 RC2 radio button binding brokenAngular 2 RC2 单选按钮绑定损坏
【发布时间】：2016-10-20 20:15:40
【问题描述】：

我使用此解决方案Angular2 - Radio Button Binding 进行单选按钮绑定。它在 RC1 下运行良好。

但是当我升级到 Angular2 RC2.有编译错误

    app/shared/services/radio.value.accessor.ts(22,5): error TS2345: 
Argument of type                       '{ selector:  string; 
                                          host: { [x: string]: string; '(change)': string; '(blur)': string; }; 
                                          binding...' 
is not assignable to parameter of type '{ selector?: string; 
                                          inputs?: string[]; 
                                          outputs?: string[]; 
                                          properties?: string[]; 
                                          events?: strin...'.
  Object literal may only specify known properties, and 'bindings' does not exist in type 
                                       '{ selector?: string; 
                                          inputs?: string[]; 
                                          outputs?: string[]; 
                                          properties?: string[]; 
                                          events?: strin...'.

代码如下。

import {Directive, Renderer, ElementRef, forwardRef} from '@angular/core';
import {NG_VALUE_ACCESSOR, ControlValueAccessor} from '@angular/common';

export const RADIO_VALUE_ACCESSOR: any = /*@ts2dart_const*/ {
    provide: NG_VALUE_ACCESSOR,
    useExisting: forwardRef(() => RadioControlValueAccessor),
    multi: true
};

/**
 * The accessor for writing a value and listening to changes on a radio input element.
 *
 *  ### Example
 *  ```
 *  <input type="radio" ngModel="radioModel">
 *  ```
 */
@Directive({
    selector: 'input[type=radio][ngControl],input[type=radio][ngFormControl],input[type=radio][ngModel]',
    host: {'(change)': 'onChange($event.target.value)', '(blur)': 'onTouched()'},
    bindings: [RADIO_VALUE_ACCESSOR]
})
export class RadioControlValueAccessor implements ControlValueAccessor {
    onChange = (_:any) => {} ;
    onTouched = () => {};

    constructor(private _renderer: Renderer, private _elementRef: ElementRef) {}

    writeValue(value: any): void {
        this._renderer.setElementProperty(this._elementRef.nativeElement, 'checked', value == this._elementRef.nativeElement.value);
    }
    registerOnChange(fn: (_: any) => {}): void { this.onChange = fn; }
    registerOnTouched(fn: () => {}): void { this.onTouched = fn; }
}

知道如何解决这个问题吗？

或者 RC2 是否以我不必使用外部代码的方式包含单选按钮绑定？如果有怎么办？

【问题讨论】：

标签： typescript angular

【解决方案1】：

我认为RC2中还有bindings，看这里：

export interface ComponentMetadataFactory {
    (obj: {
        selector?: string;
        inputs?: string[];
        outputs?: string[];
        properties?: string[];
        events?: string[];
        host?: {
            [key: string]: string;
        };
        bindings?: any[];
        providers?: any[];
        exportAs?: string;
        moduleId?: string;
        queries?: {
            [key: string]: any;
        };
        viewBindings?: any[];
        viewProviders?: any[];
        changeDetection?: ChangeDetectionStrategy;
        templateUrl?: string;
        template?: string;
        styleUrls?: string[];
        styles?: string[];
        directives?: Array<Type | any[]>;
        pipes?: Array<Type | any[]>;
        encapsulation?: ViewEncapsulation;
    }): ComponentDecorator;
    new (obj: {
        selector?: string;
        inputs?: string[];
        outputs?: string[];
        properties?: string[];
        events?: string[];
        host?: {
            [key: string]: string;
        };
        bindings?: any[];
        providers?: any[];
        exportAs?: string;
        moduleId?: string;
        queries?: {
            [key: string]: any;
        };
        viewBindings?: any[];
        viewProviders?: any[];
        changeDetection?: ChangeDetectionStrategy;
        templateUrl?: string;
        template?: string;
        styleUrls?: string[];
        styles?: string[];
        directives?: Array<Type | any[]>;
        pipes?: Array<Type | any[]>;
        encapsulation?: ViewEncapsulation;
    }): ComponentMetadata;
}

【讨论】：

如果绑定存在，那么它为什么停止工作？你能帮忙解释一下吗？
尝试将 radiovalueaccesor 作为简单对象而不是数组传递
您的意思是将bindings: [RADIO_VALUE_ACCESSOR] 更改为bindings: {obj: RADIO_VALUE_ACCESSOR} 吗？也许我误解了你？
让我们continue this discussion in chat。
抱歉，我现在正在打电话

【解决方案2】：

改变

@Directive({
    selector: 'input[type=radio][ngControl],input[type=radio][ngFormControl],input[type=radio][ngModel]',
    host: {'(change)': 'onChange($event.target.value)', '(blur)': 'onTouched()'},
    bindings: [RADIO_VALUE_ACCESSOR]
})

到

@Directive({
    selector: 'input[type=radio][ngControl],input[type=radio][ngFormControl],input[type=radio][ngModel]',
    host: {'(change)': 'onChange($event.target.value)', '(blur)': 'onTouched()'},
    providers: [RADIO_VALUE_ACCESSOR]
})

它现在工作正常。感谢 AngJobs 提供有关更改位置的线索。

【讨论】：