将 Angular 2 组件的绑定委托给嵌套元素

Question

这些绑定效果很好：

<input type="checkbox" (click)="foo.bar()" [(ngModel)]="foo.baz">

但是我如何将这些绑定委托给组件内部的输入？

<custom-checkbox>Check me!</custom-checkbox>

...这是 "custom-checkbox.component.html":

<span class="checkbox-wrap">
  <input type="checkbox" class="checkbox"> <!-- This should have all the bindings -->
  <span class="checkbox-styling"></span>
  <span class="checkbox-label"><ng-content></ng-content></span>
</span>

我已经使用 Angular 1 几年了，但本周才开始使用 Angular 2。我读过许多文章，例如 Custom form controls in Angular, Angular docs, other somewhat-similar Stack Overflow questions, and the TypeScript used on Angular 2's Material Checkbox，但我仍然不明白他们是如何做到这一点的。看起来应该更直接一些。

这是我需要制作的许多自定义 UI 元素之一，所以我希望这个示例能帮助我理解我所缺少的原则和实现。

我知道我可以使用带有选择器的输入复选框，然后将其包裹起来，但我想要像 Angular 2 Material checkbox 一样干净。

我基本上在做与他们相同的事情 (Angular 2 Material)，但使用我们自己的样式，并且比他们提供的所有选项都简单得多。就像他们说的，

<md-checkbox> provides the same functionality as a native <input type="checkbox"> enhanced with Material Design styling and animations.

这就是我想要做的。

Answer 1

虽然 Angular 1 的 link 功能似乎使整个过程更容易，但这篇文章似乎给了我 Angular 2 Material 正在使用 Material 的勇气 built-in接口有一个很好的例子：Angular 2: Connect your custom control to ngModel with Control Value Accessor.

这允许开发团队通过直接绑定到组件但将绑定中继到模板内的复选框（或其他表单元素）来使用我的组件。

为方便起见从站点引用，并在 link 中断时用于文档持久化：

So without further ado, here is our component:

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

const noop = () => {
};

export const CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR: any = {
    provide: NG_VALUE_ACCESSOR,
    useExisting: forwardRef(() => CustomInputComponent),
    multi: true
};

@Component({
    selector: 'custom-input',
    template: `<div class="form-group">
                    <label><ng-content></ng-content>
                        <input [(ngModel)]="value"
                                class="form-control"
                                (blur)="onBlur()" >
                    </label>
                </div>`,
    providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR]
})
export class CustomInputComponent implements ControlValueAccessor {

    //The internal data model
    private innerValue: any = '';

    //Placeholders for the callbacks which are later providesd
    //by the Control Value Accessor
    private onTouchedCallback: () => void = noop;
    private onChangeCallback: (_: any) => void = noop;

    //get accessor
    get value(): any {
        return this.innerValue;
    };

    //set accessor including call the onchange callback
    set value(v: any) {
        if (v !== this.innerValue) {
            this.innerValue = v;
            this.onChangeCallback(v);
        }
    }

    //Set touched on blur
    onBlur() {
        this.onTouchedCallback();
    }

    //From ControlValueAccessor interface
    writeValue(value: any) {
        if (value !== this.innerValue) {
            this.innerValue = value;
        }
    }

    //From ControlValueAccessor interface
    registerOnChange(fn: any) {
        this.onChangeCallback = fn;
    }

    //From ControlValueAccessor interface
    registerOnTouched(fn: any) {
        this.onTouchedCallback = fn;
    }

}

We are then able to use this custom control as follows:

<form>

    <custom-input name="someValue"
                  [(ngModel)]="dataModel">
          Enter data:
    </custom-input>

</form>

谢谢阿尔梅罗·斯泰恩！！

将 Angular 2 组件的绑定委托给嵌套元素

Delegate bindings from Angular 2 component to nested element

checkbox

components

custom-controls

angular