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

Question

我现在的情况是这样的..

我正在安装和配置 Froala，它依赖于 jquery，并为 jquery 提供了文档。

Angular 2 and 4 Froala WYSIWYG Editor - Extended Config

我比 JS/Angular 更了解服务器端。我知道避免在 Angular.

中使用 jquery 的最佳做法

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

如果存在，请查看 git page of Angular Implementation of Library。
使用 IDE "go to definition" 搜索我可以使用的指令。
如果找不到我需要的指令，我会使用@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 组件中。 - 这给了我一个很好的研究起点和 google 更多。

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

我添加了一个从他们的选项页面上抓取的界面，以获得像这样的选项的智能感知：

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 中记录和编写的消费插件？

In Angular 2, how to approach consuming plugin that is documented in and written for jquery?

jquery

froala

angular