Angular ControlValueAccessor

Question

我的任务是在组件周围实现一个包装器，这样它就可以无缝地与Angular表单一起使用，所以我实现了ControlValueAccessor接口。底层组件是开源的，看一看，我意识到它也实现了ControlValueAccessor

对于我的包装器来说，重新实现接口似乎很愚蠢，但我确实需要包装器来设置一些组件默认值。有没有办法避免在保留包装器的同时重新实现ControlValueAccessor？

这是我用来设置ngx-quill默认值的代码

class MyTextEditor {
  public ngOnInit() {
    // icons configuration
    var icons = Quill.import('ui/icons');
    icons['bold'] = '<i class="fa fa-bold" aria-hidden="true"></i>';
    icons['italic'] = '<i class="fa fa-italic" aria-hidden="true"></i>';
    icons['underline'] = '<i class="fa fa-underline" aria-hidden="true"></i>';
    icons['image'] = '<i class="fa fa-picture-o" aria-hidden="true"></i>';
    icons['code'] = '<i class="fa fa-code" aria-hidden="true"></i>';


    const blockEmbed = Quill.import('blots/block/embed');
    blockEmbed.blotName = 'divider';
    blockEmbed.tagName = 'hr';
    Quill.register(blockEmbed);
  }
}

Answer 1

我不熟悉ngx-quill库，但可以考虑扩展组件，而不是像下面演示的那样修改它：

class MyTextEditor extends QuillEditor {

  public ngOnInit() {
    super.ngOnInit();
    
    // icons configuration
    var icons = Quill.import('ui/icons');
    icons['bold'] = '<i class="fa fa-bold" aria-hidden="true"></i>';
    icons['italic'] = '<i class="fa fa-italic" aria-hidden="true"></i>';
    icons['underline'] = '<i class="fa fa-underline" aria-hidden="true"></i>';
    icons['image'] = '<i class="fa fa-picture-o" aria-hidden="true"></i>';
    icons['code'] = '<i class="fa fa-code" aria-hidden="true"></i>';


    const blockEmbed = Quill.import('blots/block/embed');
    blockEmbed.blotName = 'divider';
    blockEmbed.tagName = 'hr';
    Quill.register(blockEmbed);
  }
} 

另外，您可以在使用forRoot方式模拟QuillModule时设置自定义配置，如下所示：

QuillModule.forRoot({
  toolbar: [
    ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
    ['blockquote', 'code-block'],

    [{ 'header': 1 }, { 'header': 2 }],               // custom button values
    [{ 'list': 'ordered' }, { 'list': 'bullet' }],
    [{ 'script': 'sub' }, { 'script': 'super' }],      // superscript/subscript
    [{ 'indent': '-1' }, { 'indent': '+1' }],          // outdent/indent
    [{ 'direction': 'rtl' }],                         // text direction

    [{ 'size': ['small', false, 'large', 'huge'] }],  // custom dropdown
    [{ 'header': [1, 2, 3, 4, 5, 6, false] }],

    [{ 'color': [] }, { 'background': [] }],          // dropdown with defaults from theme
    [{ 'font': [] }],
    [{ 'align': [] }],

    ['clean'],                                         // remove formatting button

    ['link', 'image', 'video']                         // link and image, video
  ]
})

Answer 2

我发现了一种在不实现ControlValueAccessor的情况下包装一些表单组件并保留ReactiveForms功能的方法如下：

父组件：

@Component({
  selector: 'parent-comp',
  template: `
    <child-comp controlName="myReactiveFormComponentName"></child-comp>
  `,
})

在子组件中添加以下内容：

@Component({
  selector: 'child-comp',
  template: `
    <input type="text" [formControlName]="controlName" />
  `,
  viewProviders: [
    {
      provide: ControlContainer,
      useExisting: FormGroupDirective
    }
  ]
})
export class ChildComponent {
    @Input() controlName:string

}

这样，您就可以从父级传递控件的名称，并在子级中将其赋值给您的输入。