0

我有一个任务是围绕一个组件实现一个包装器，以便它可以无缝地与 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);
  }
}
4

2 回答 2

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

此外，您可以QuillModule使用forRoot以下方法在 imorting 时设置自定义配置：

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
  ]
})
于 2020-08-25T23:13:42.647 回答
0

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

父组件：

@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

}

这样您就可以从父级传递控件的名称并将子级分配给您的输入。

于 2020-08-25T16:05:13.680 回答