6px-alert-service 中文文档教程

Question

6px Angular Alert Service

Angular 模块的开始

Getting started

这为使用 6px UI 的 Angular 4+ 应用程序提供了一个警报服务。 您需要的所有文件都在 /src 中。

注意：在 /dist 中有一个 package.json 文件是发布所需要的。

克隆回购后。 您可以从根目录运行 npm run build。 这将运行脚本来清理、ngc、捆绑、缩小和复制。

Publish

要发布到 npm，您需要设置它，然后运行 ​​npm run npm-to-publish。 这使用了上面提到的包。

Local development

要在本地开发，您需要执行以下操作：

npm run build

cd dist/

npm link

这会创建一个指向全局 node_modules 的符号链接。 然后从您的工作目录：

npm link 6px-alert-service

一旦链接到模块的本地副本。 在您的 systemjs.config.js 文件中，您需要添加映射。

map: {
  app: 'app',
  // angular bundles
  ...
  '6px-alert-service': 'node_modules/6px-alert-service/bundles/6px-angular-alert-service.umd.js'
}

注意：您的包的名称是在您的 rollup.config.js 文件中创建的。 Rollup us 用于创建 umd 模块。

然后将其添加到您的 app.module.ts 文件中。

import { SpxAlertServiceModule } from '6px-alert-service';

@NgModule({
  imports: [
    SpxAlertServiceModule
    ...
  ]
})

将标记添加到您的根 .html 文件，这将显示您的警报。

<spx-alert></spx-alert>

现在您可以通过导入服务并调用它的方法在您的应用程序中使用它。

Add an alert:
@params message: string
@params type: string['success', 'fail', 'info']
@params callback: Function
addAlert(message, type, callback);


Remove an alert:
@params index: number
removeAlertByIndex(index);


Clear all:
clearAll();

示例 -

import { SpxAlertService } from '6px-alert-service';

export class AppComponent {
  constructor(private spxAlert: SpxAlertService) {}

  createAlert() {
    this.spxAlert.addAlert('Toast Message', 'success', this.callbackMethod);
  }

  callbackMethod() {
    alert('Alert the callback');
  }
}

Live updates locally

开发时，进行更改，然后运行 ​​npm run build。 完成后只需刷新即可在本地看到您的更改。

Credits

这个项目基本上是一个精简版 角异步本地存储 通过 https://github.com/cyrilletuzi。 在他的博客中，他解释了如何建立一个体面的 角度模块：https://medium.com/@ cyrilletuzi/how-to-build-and-publish-an-angular-module-7ad19c0b4464#.9y88ipdk7

License

麻省理工学院