Javascript Angular：为第三方软件包（库）创建插件

我创建了Angular Library（），我想通过使用插件来扩展它的功能

在Angular中声明插件的最佳位置是什么？（可能类似于

myLibModule.forRoot（…）

），插件本身应该是什么类型的实例

我只需为每个插件添加模块，就可以使用主模块注册插件。我不太喜欢这个解决方案，因为插件会自动注册，但它应该由使用库的应用程序负责

---

更新：相关问题已在github上打开。

我认为您可以向用户提供将组件用作插件的功能。该组件必须扩展抽象基插件组件

例如，

清除样式

插件可能看起来像

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

其中，

ng2wigplugpuncomponent

是您的库提供的抽象基类：

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

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

在哪里

• NG_WIG_CUSTOM_按钮

  是您的全局库令牌，用于识别库中提供的插件

ng2wig toolbar.service.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},
      ]
    };
  }
}

@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\u FOR\u ENTRY\u组件是能够动态加载插件的角度全局令牌

2）在

AppModule

模块的声明数组中声明

NwClearStylesButtonComponent

3）将其传递给

Ng2WigModule.forRoot

方法

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

然后，您的主要任务是通过使用

ComponentFactoryResolver

和

ViewContainerRef

动态生成组件（请参阅下面plunker中的

ng2wig plugin.directive.ts

）

---

这似乎有点不清楚。你想提供类似API的服务吗？这取决于插件。他们中的一些人可以用新的按钮来扩展工具栏。我在模块化音乐制作系统中遇到了类似的问题，解决方案是每个插件的“表面部分”必须与定义插件程序集的接口保持一致，例如插件的关键元数据，如名称、关键类等。，然后插件本身的内部部分通过放置在方法（例如

@nodeDidActivate

，

@nodeStateDidChange

等）上的装饰钩子工作。这个系统使用React作为它的UI层，但在ng中应该没有那么大的不同。谢谢你，你的答案很好！我以前没有提供赏金来激励其他人分享他们的答案

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