委托从Angular 2组件到嵌套元素的绑定

这些绑定非常有效：

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

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

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

检查我！

…下面是“custom checkbox.component.html”：

我已经使用Angular 1好几年了，但本周才开始使用Angular 2。我读过很多文章，比如Angular docs，其他一些类似的堆栈溢出问题，以及Angular 2上使用的问题，但我仍然不明白他们是如何做到这一点的。看起来应该更直截了当些

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

我知道我可以使用一个带有选择器的输入复选框，并将其包装起来，但我希望保持原样干净

我基本上是在做和他们一样的事情（棱角2材质），但是有我们自己的风格，而且比他们提供的所有选项都简单得多。就像他们说的,

提供与本机相同的功能，并通过材质设计样式和动画增强

---

这就是我要做的。

虽然Angular 1的链接功能似乎使整个过程更容易，但本文似乎通过一个很好的示例，向我展示了Angular 2材质通过内置接口使用的勇气：

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

如果链接中断，为了方便和文档持久性，请从站点引用：

因此，不用多说，这里是我们的组件：

从“@angular/core”导入{Component，forwardRef}； 从“@angular/forms”导入{NG_VALUE_访问器，ControlValueAccessor}； 常量noop=（）=>{ }; 导出常量自定义\输入\控制\值\访问器：任意={ 提供：NG_值访问器， useExisting:forwardRef（（）=>CustomInputComponent）， 多：真的 }; @组成部分({ 选择器：“自定义输入”， 模板：` `, 提供者：[自定义\输入\控制\值\访问器] }) 导出类CustomInputComponent实现ControlValueAccessor{ //内部数据模型 私有内部值：any=''； //稍后提供的回调的占位符d //通过控制值访问器 私有onTouchedCallback:（）=>void=noop； private onChangeCallback:（quo:any）=>void=noop； //获取访问器 获取值（）：任意{ 返回此.innerValue； }; //设置访问器，包括调用onchange回调 设定值（v:任意）{ 如果（v！==此.innerValue）{ this.innerValue=v； 这是一个错误（v）； } } //设置模糊 onBlur（）{ 这个.ontouchdcallback（）； } //从ControlValueAccessor接口 writeValue（值：任意）{ if（值！==此.innerValue）{ this.innerValue=值； } } //从ControlValueAccessor接口 注册变更（fn：任何）{ this.onChangeCallback=fn； } //从ControlValueAccessor接口 注册人（fn：任何）{ this.onTouchedCallback=fn； } } 然后，我们可以按如下方式使用此自定义控件：

输入数据：

---

---

谢谢阿尔梅罗·斯廷

尽管Angular 1的链接功能似乎使整个过程变得更简单，但本文似乎通过一个很好的示例向我展示了Angular 2材质通过内置接口使用的勇气：

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

如果链接中断，为了方便和文档持久性，请从站点引用：

因此，不用多说，这里是我们的组件：

从“@angular/core”导入{Component，forwardRef}； 从“@angular/forms”导入{NG_VALUE_访问器，ControlValueAccessor}； 常量noop=（）=>{ }; 导出常量自定义\输入\控制\值\访问器：任意={ 提供：NG_值访问器， useExisting:forwardRef（（）=>CustomInputComponent）， 多：真的 }; @组成部分({ 选择器：“自定义输入”， 模板：` `, 提供者：[自定义\输入\控制\值\访问器] }) 导出类CustomInputComponent实现ControlValueAccessor{ //内部数据模型 私有内部值：any=''； //稍后提供的回调的占位符d //通过控制值访问器 私有onTouchedCallback:（）=>void=noop； private onChangeCallback:（quo:any）=>void=noop； //获取访问器 获取值（）：任意{ 返回此.innerValue； }; //设置访问器，包括调用onchange回调 设定值（v:任意）{ 如果（v！==此.innerValue）{ this.innerValue=v； 这是一个错误（v）； } } //设置模糊 onBlur（）{ 这个.ontouchdcallback（）； } //从ControlValueAccessor接口 writeValue（值：任意）{ if（值！==此.innerValue）{ this.innerValue=值； } } //从ControlValueAccessor接口 注册变更（fn：任何）{ this.onChangeCallback=fn； } //从ControlValueAccessor接口 注册人（fn：任何）{ this.onTouchedCallback=fn； } } 然后，我们可以按如下方式使用此自定义控件：

输入数据：

---

---

谢谢阿尔梅罗·斯廷

将绑定直接放在component@RomanC如果我这样做，该模型将不会应用于复选框的真实状态，并且我在控制台中也会遇到此错误：

EXCEPTION:error in./AppComponent c
<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>

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;
    }

}
<form>

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

</form>