如何从另一个组件访问 [(ngModel)]？

Question

我有一个包含 ngx-quill 组件的通用组件。我想调用其他几个组件来获取编辑器而不是输入字段。我成功地完成了这项工作。但是我正在使用 ngModels 进行双向数据绑定，不能在 Div 上使用。如何在我的公共组件中访问它们。

所以这是我的常用组件:

common_component.html

<quill-editor>
</quill-editor>

Common_component.ts:

import { Component } from '@angular/core';
import * as _ from 'underscore';

@Component({
    selector: 'app-quill-editor',
    templateUrl: './common_component.html'
})

export class CommanQuillComponent {

    constructor(
    ) {}

}

这就是我所说的:

main_component.html

<div>
    <app-quill-editor
        id="float-input"
        placeholder=" "
        name="myRange"
        step="1"
        [(ngModel)]="myVar"
    ></app-quill-editor>
</div>

main_component.ts 除了变量声明什么都没有。

现在这里的问题是 ngModel 不能在 div 上使用（它会抛出错误），html 认为是 div 标签，然后在里面调用，我想要那个 ngModel on ，我不能手动放置它，因为它将用作通用组件。

请帮助我了解如何实现此数据绑定？

感谢您的支持，如果应该向 post 添加更易于理解的代码，请告诉我。

Answer 1

您正在寻找的是 ControlValueAccessor 实现自定义表单控件，以便 two-way 数据绑定可以在自定义组件上工作。

假设您在 quill-editor:

上绑定了 value 变量

<quill-editor [ngModel]="value" (ngModelChange)="onChange($event)"></quill-editor>

@Component({
  ...
  providers: [
    { 
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => CommanQuillComponent),
      multi: true
    }
  ]
})
export class CommanQuillComponent implements ControlValueAccessor() {
   value: string = '';

   ...
   // Add other properties as Input
   @Input()
   placeholder: string;

   ...

   propagateChange = (_: any) => {};
   registerOnChange(fn) {
    this.propagateChange = fn;
  }
  
  writeValue(value: string) {
     this.value = value; // <- you receive the value which is binded to this component here
  }

  onChange(event: string) {
     this.value = event;
     this.propagateChange(event); // <- you export the value so the binded variable is updated
  }
}

现在您可以在 CommanQuillComponent 上使用 two-way 数据绑定：

<div>
    <app-quill-editor
        id="float-input"
        placeholder=" "
        name="myRange"
        step="1"
        [(ngModel)]="myVar"
    ></app-quill-editor>
</div>

网上有很多文章，您可以阅读以了解更多详细信息：

https://blog.thoughtram.io/angular/2016/07/27/custom-form-controls-in-angular-2.html

https://javascript-conference.com/blog/angular-reactive-forms-building-custom-form-controls/

https://codinglatte.com/posts/angular/angular-build-custom-form-control/

如何从另一个组件访问 [(ngModel)]？

How to access [(ngModel)] from another component?

angular

ngmodel

ngx-quill