Question

我正在开展一项由angular-cli提供支持的Angular 2项目。

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

我将用我的用例说明问题：我需要实现此通知插件：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）。所以我在主app.component.html添加了标记。

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

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

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

这是在Angular 2中封装和抽象第三方插件的最佳方法吗？

Answer 1

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

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

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

考虑到这一点，我会将NotificationService重命名为其他内容。也许Notifier或其他不要将其与服务相混淆的事情。

但通常这里有一些很好的软件设计，只需要处理概念。

如何在Angular 2中封装第三方插件逻辑？

1 个答案: