javascript - Angular:为第 3 方包(库)创建插件

Question

我创建了 Angular 库 ( ngx-wig )，我想提供一种使用插件 来扩展其功能的能力。

在 Angular 中声明插件的最佳位置是什么？ (可能类似于 myLibModule.forRoot(..))什么类型的实例应该是插件本身？

我solved same issue对于 AngularJs 只需为我使用 configProvider 注册插件的每个插件添加模块即可的主要模块。不太喜欢这个解决方案，因为插件会自行注册，但这应该是使用库的应用程序的责任。

更新:相关问题已在 github 上打开 here .

Answer 1

我觉得你可以提供用户使用组件作为一个插件。该组件必须扩展您的抽象基础插件组件。

例如 clear-styles 插件可能看起来像

@Component({
  selector: `nw-clear-styles-button`,
  template: `
    <button (click)="clearStyles($event)" 
        [disabled]="editMode || disabled" 
        class="nw-button clear-styles" title="Clear Styles">
      Clear Styles
    </button>`
})
export class NwClearStylesButtonComponent extends Ng2WigPluginComponent {
  constructor() {
    super();
  }

  clearStyles() {
    const div = document.createElement('div');
    div.innerHTML = this.content;
    this.contentChange.emit(div.textContent);
  }
}

格式插件

@Component({
  selector: `nw-formats-button`,
  template: `
    <select class="nw-select"
            [(ngModel)]="format"
            (ngModelChange)="execCommand('formatblock', format.value)"
            [disabled]="editMode || disabled">
      <option *ngFor="let format of formats" [ngValue]="format">{{ format.name }}</option>
    </select>
  `
})
export class NwFormatButtonComponent extends Ng2WigPluginComponent {
  formats = [
    {name: 'Normal text', value: '<p>'},
    {name: 'Header 1', value: '<h1>'},
    {name: 'Header 2', value: '<h2>'},
    {name: 'Header 3', value: '<h3>'}
  ];

  format = this.formats[0];

  constructor() {
    super();
  }
}

其中 Ng2WigPluginComponent 是您的库提供的抽象基类:

export abstract class Ng2WigPluginComponent {
  execCommand: Function;
  editMode: boolean;
  content: string;

  editModelChange: EventEmitter<boolean> = new EventEmitter();
  contentChange: EventEmitter<string> = new EventEmitter();
}

因此用户可以轻松使用在基类中声明的属性。

要注册此类插件，我们可以使用您提到的 forRoot 方法。为此你需要

1) 按如下方式配置您的库模块:

ng2wig.module.ts

@NgModule({
 ...
})
export class Ng2WigModule {
  static forRoot(entryComponents: CustomButton[]) {
    return {
      ngModule: Ng2WigModule,
      providers: [
        Ng2WigToolbarService,
        {provide: NG_WIG_CUSTOM_BUTTONS, useValue: entryComponents},
        {provide: ANALYZE_FOR_ENTRY_COMPONENTS, multi: true, useValue: entryComponents},
      ]
    };
  }
}

在哪里

• NG_WIG_CUSTOM_BUTTONS 是您的全局库 token ，用于识别库中提供的插件

ng2wig-toolbar.service.ts

@Injectable()
export class Ng2WigToolbarService {
  constructor(@Optional() @Inject(NG_WIG_CUSTOM_BUTTONS) customButtons: CustomButton[]) {
    if (customButtons) {
      customButtons.forEach(plugin => this.addCustomButton(plugin.pluginName, plugin.component));
    }
  }

• ANALYZE_FOR_ENTRY_COMPONENTS 是能够动态加载插件的 Angular 全局标记

2) 在 AppModule 模块的声明数组中声明 NwClearStylesButtonComponent

3)传递给Ng2WigModule.forRoot方法

Ng2WigModule.forRoot([
   { pluginName: 'clear-styles', component: NwClearStylesButtonComponent },
   { pluginName: 'format', component: NwFormatButtonComponent }
]) 

然后您的主要任务是使用 ComponentFactoryResolver 和 ViewContainerRef 动态生成您的组件(参见 ng2wig-plugin.directive.ts在下面的 plunker 中)

Plunker Example