Angular2中如何封装第三方插件逻辑？

Question

我正在做一个 Angular 2 项目，由 angular-cli.

提供支持

我需要集成第 3 方插件。我想知道哪种方法最好在一个地方封装尽可能多的插件相关逻辑。

我将用我的用例来说明这个问题：我需要实现这个通知插件：https://github.com/akserg/ng2-toasty

我决定将与插件相关的初始化和配置逻辑封装在服务中，因此我在我的项目中使用我的 NotificationService 抽象。我这样做主要是因为万一我需要更改库或用另一个库替换库，理想情况下，我只想在一个需要进行更改的地方结束。

这是我的 notification.service.ts:

import { Injectable } from '@angular/core';
import { ToastyService, ToastyConfig, ToastOptions } from 'ng2-toasty';

@Injectable()
export class NotificationService {

    constructor(
        private toastyService:  ToastyService,
        private toastyConfig: ToastyConfig
    ) {
        this.toastyConfig.theme = 'bootstrap';
    }

    fireSuccess(msg: string, title: string = 'Success!') {
        const toastOptions: ToastOptions = {
            title,
            msg
        };

        this.toastyService.success(toastOptions);
    }

}

然而，与插件相关的逻辑分布在另外 3 个地方（文件）：

插件的样式表导入到angular-cli.json:

{
    "apps": [
        ... // omitted for brevity
        {
          "styles": [
            "styles.scss",
            "../node_modules/ng2-toasty/style-bootstrap.css"
          ],
        }
    ],
    ... // omitted for brevity
}

插件的导入 - ToastyModule.forRoot() 放在我的应用中 NgModule:

import { ToastyModule } from 'ng2-toasty';

@NgModule({
    imports: [
        ToastyModule.forRoot()
    ],
    ... // omitted for brevity
})
export class AppModule { }

插件的 <ng2-toasty></ng2-toasty> 标签应该放在我的应用程序的任何模板中的某个位置 (that's a plugin-related requirement)。所以我在 main app.component.html.

困扰我的是，与插件相关的逻辑分布在总共 4 个文件中：notification.service、angular-cli.json、app.module.ts 和 app.component.html。

这是我能想到的最封装的方法了。我想知道是否有办法将更多与插件相关的逻辑移动到一个地方（可能在 notification.service）。

所以，总结一下我的问题：

Is this the best approach to encapsulate and abstract 3rd party plugin in Angular 2?

Answer 1

看起来 <ng2-toasty></ng2-toasty> 是一个组件（如果不是，请纠正我）。因此，您可以使用（ style | styleUrls ）字段将与此相关的 css （也包括 scss ）封装在 @Component 装饰器中，就像 angular 2 component styling guide。这是封装样式的最佳方式。

将您的插件逻辑封装在可注入对象中是个好主意，因为显然您需要将该对象注入到需要它的类中。

但可注射并不总是意味着服务。在 angular 2 service concept 中表示一个对象，它提供一个接口来从数据源获取和保存数据。使用服务使您的应用程序易于测试，因为您可以模拟服务对象并为您的组件提供虚假数据。

考虑到这一点，我会将 NotificationService 重命名为其他名称。也许 Notifier 或其他不要将它与服务混淆的东西，这取决于您。

不过这里一般都会有一些不错的软件设计，只是需要和概念打交道。

Angular2中如何封装第三方插件逻辑？

How to Encapsulate 3rd Party Plugin Logic in Angular 2?

angular-cli

angular