如何使用 Angular 9 和 NG_VALUE_ACCESSOR？答案

【问题标题】：How to use Angular 9 and NG_VALUE_ACCESSOR?如何使用 Angular 9 和 NG_VALUE_ACCESSOR？
【发布时间】：2020-03-22 12:14:48
【问题描述】：

我正在尝试创建一个自定义输入元素，但由于什么原因它无法工作并且不显示任何内容。现在的问题是：为什么以及我做错了什么？

这是我的代码：

    import { Component, forwardRef } from '@angular/core';
    import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
    
    @Component({
      selector: 'custom-input',
      template: '<input [(ngModel)]="value"/>local: {{val}}',
      providers: [
        {
          provide: NG_VALUE_ACCESSOR,
          useExisting: forwardRef(() => CustomInputComponent),
          multi: true
        }
      ]
    })
    export class CustomInputComponent implements ControlValueAccessor {
    
      constructor() { }
    
      onChange: any = () => {}
      onTouch: any = () => {}
      val= ""
    
      set value(val){
        if( val !== undefined && this.val !== val){
        this.val = val
        this.onChange(val)
        this.onTouch(val)
        }
       
      }
    
      writeValue(value: any){
        this.value = value
      }
    
      registerOnChange(fn: any){
        this.onChange = fn
      }
    
      registerOnTouched(fn: any){
        this.onTouch = fn
      }
    
    }

HTML 看起来像：

<custom-input [(ngModel)]="running" name="externalVal" ngDefaultControl> </custom-input>

我使用ngDefaultControl 是因为我想在表单之外使用它。现在的问题是，编译工作正常，但没有显示任何内容。代码有没有错误或错误？

【问题讨论】：

我投票结束这个问题，因为 a) OP 已经回答了他自己的问题（忘记结束？） b) 如果没有 OP 提供的答案，其他人可能无法回答这个问题

标签： angular components

【解决方案1】：

抱歉，我太笨了，因为我忘记在我加载 CustomInputModule 的共享模块中导出组件。为这样一个愚蠢的错误损失了两个小时的生命……

【讨论】：