@acpaas-ui/ngx-embeddable-widgets 中文文档教程

Question

Embeddable Widgets Component (Angular)

这是一个 Angular 组件和装饰器，包装了 ACPaaS UI Embeddable Widgets 框架。

有关哪些可嵌入小部件的更多信息，请参见上面的链接。

有一个演示应用程序，请参阅下面的运行说明。

How to use

Installing

> npm install @acpaas-ui/ngx-embeddable-widgets

Embedding a widget

在您的模块中导入组件：

import { EmbeddableWidgetsModule } from '@acpaas-ui/ngx-embeddable-widgets';

@NgModule({
  imports: [
    ...,
    EmbeddableWidgetsModule
  ],
  ...
})

在您的模板中：

<aui-embeddable-widget
  widgetUrl="//example.com/widget/definition.json"
  [props]="{ someProp: 'value' }">
</aui-embeddable-widget>

支持的属性：

• widgetUrl: the URL of the widget's JSON definition (required)
• props: the props to pass to the embedded widget
• overrides: overrides to specify when the widget definition is loaded (only applied once per loaded tag)
• useGlobalLibrary: if true, uses window.auiEmbeddableWidgets instead of @acpaas-ui/embeddable-widgets

没有事件，因为所有事件处理程序都在 props 中指定。 要了解如何执行此操作，请查看 example 文件夹中的 onClick 事件。

Publishing a widget

在您的 Angular 应用程序中创建一个包含小部件的页面。

为您的小部件发布 JSON 定义。 例如，您可以在资产文件夹中包含文件 widget-definition.json。 有关示例，请参见 example/assets/widget-definition.json。

装饰页面的组件：

import { EmbeddableWidget } from '@acpaas-ui/ngx-embeddable-widgets';

@Component({
  selector: 'app-widget',
  templateUrl: './widget.page.html'
})
@EmbeddableWidget('/assets/widget-definition.json')
export class WidgetPage {
// ...

  public auiOnWidgetInit(props) {
    // initialize from props here
  }

这将执行以下操作：

• Initialize the current page as the widget defined in the JSON.
• Call the auiOnWidgetInit method and pass it the props specified from the container app.

Run the demo app

> npm install
> npm start

浏览到 localhost:4200

Angular Universal

组件可以在 Angular Universal 中使用服务器端渲染来渲染。

1. 在您的通用应用程序的 server.ts 中包含以下代码 以

   if (typeof window === 'undefined') {
     global['window'] = {};
   }
   

2. 正常方式使用

Contributing

我们欢迎您的错误报告和拉取请求。

请参阅我们的贡献指南。

Support

Joeri Sebrechts (joeri.sebrechts@digipolis.be)

License

本项目根据MIT 许可<发布/a>。