Question

我目前的情况是这个......

我正在安装和配置Froala，它具有依赖性并记录在jquery中。

Angular 2 and 4 Froala WYSIWYG Editor - Extended Config

我比JS / Angular更了解服务器端。我知道避免在Angular中使用jquery的最佳做法。

出现这种情况时，我目前的做法是：

如果存在，请查看git page of Angular Implementation of Library。
使用IDE＆＃34;转到定义＆＃34;搜索我可以使用的指令。
如果我找不到我需要的指令，那么我会使用@ViewChild。

配置和使用这样的插件的Angular方法是什么？这是跟随文档并使用jquery配置的情况吗？如上面的扩展配置中的以下内容：

  ngOnInit () {
    $.FroalaEditor.DefineIcon('alert', {NAME: 'info'});
    $.FroalaEditor.RegisterCommand('alert', {
      title: 'Hello',
      focus: false,
      undo: false,
      refreshAfterCallback: false,

      callback: function () {
        alert('Hello!');
      }
    });
  }

编辑1： 回应评论。

将jquery插件包装在Angular组件中的最佳实践。 - 这给了我一个很好的研究和谷歌的跳跃点。

Answer 1

我最终通过以下方式解决了这个问题：

摘要成新组件。
合并ControlValueAccessor，虽然我并不完全清楚这种方法的所有好处。
为弱类型选项创建了一个接口。我从他们的文档网站上删除了这些内容。
根据需要，在需要配置设置时添加@Input和@Output。

我最终想出了以下内容：

declare var $: any;

@Component({
  selector: 'froala-component',
  template: `
    <div #froala [froalaEditor]="froalaOptions" (froalaModelChange)="onChange($event)" [(froalaModel)]="froalaModel"></div>
   `,
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => FroalaEditorComponent),
      multi: true
    }
  ]
})
export class FroalaEditorComponent implements ControlValueAccessor, OnInit {

  @ViewChild('froala') froalaEditor: ElementRef;

  @Input() froalaModel;
  @Output() private froalaModelChange = new EventEmitter();

  @Input() set height(value: number) {
    this.froalaOptions.height = value;
  }

  @Input() set width(value: string) {
    this.froalaOptions.width = value;
  }

  public froalaOptions: FroalaOptions = {};

  ngOnInit() {
    $ = $(this.froalaEditor.nativeElement);
  }

  // implements ControlValueAccessor Interface
  public registerOnChange(fn: (_: any) => void): void {
    this.onChange = fn;
  }

  public registerOnTouched(fn: () => void): void {
    this.onTouched = fn;
  }

  public writeValue(content: any): void {
    this.froalaModel = content;
  }

  // event handlers
  public onChange(x) {
    this.froalaModel = x;
    this.froalaModelChange.emit(this.froalaModel);
  }

  public onTouched() { }

  // froala methods - https://www.froala.com/wysiwyg-editor/docs/methods
  public toggleFullScreen() {
    $.froalaEditor('fullscreen.toggle');
  }
}

我添加了一个从其选项页面中删除的界面，以获取intellisense等选项：

export interface FroalaOptions {
  aviaryKey?: Boolean; /* ADOBE_CREATIVE_CLOUD_KEY */
  aviaryOptions?: Object; /* {
    displayImageSize: true,
    theme: 'minimum'
  } */
  charCounterCount?: Boolean; /* TRUE */
  charCounterMax?: Number; /* -1 */
  etc...
}

根据需要，在消费时会添加@Input或@Output。所以目前我可以这样使用：

<froala-component [(froalaModel)]="model.HTML" height=850></froala-component>

在Angular 2中，如何处理为jquery记录和编写的消费插件？

1 个答案: