@acoustic-content-sdk/ng-web-component 中文文档教程

Question

可以动态注入的 Angular 组件的实现 web components 用于布局。

这允许您添加应用程序组件而无需重新编译应用程序。 可以使用常规布局定义和 wchtools 将组件注册到 Acoustic Content。

Table of Contents

• API Documentation

Adding a WebComponents based Layout Component

为了包含使用 Web 组件的应用程序组件，您需要提供以下工件：

• a content type
• a layout
• a layout mapping
• a web component

Content Type, Layout and Layout Mapping

遵循 的说明添加基于把手的布局 到 Acoustic 内容。 结果是内容类型、布局和布局映射。

Web Component

使用您的 Web 组件以 CommonJS 模块格式创建一个 JS 文件。 最简单的形式是：

class MyComponent extends HTMLElement {
  constructor() {
    super();
  }

  connectedCallback() {
    this.innerHTML = `<div>Works!</div>`;
  }
}

module.exports = { MyComponent };

使该文件在 Web 服务器上可用，例如将其推送给您的租户。 假设该文件随后可通过 https://my-server/my-component.js

注意：对于真实世界的应用程序，我建议使用 webpack 来捆绑您的组件。

Reference you Component from the Layout

在第一步中，您已经创建了一个布局描述符文件。 添加 tags 成员并使用语法 bundle:{$URL}#{$COMPONENT} 从标记中引用您的组件：

{
  "tags": ["bundle:https://my-server/my-component.js#MyComponent"]
}

此语法允许您将多个布局组件打包在一个文件。

将更改后的布局推送到您的租户。

注意： URL 可以是绝对的也可以是相对的。 如果是绝对的，它可以指向任何服务器位置。 如果是相对的，则相对于租户的资源基础 URL 进行解析。 这使您可以简单地将脚本作为非托管资产上传到您的租户。

@acoustic-content-sdk/ng-web-component

ng-web-component package

Implementation of an Angular component that can dynamically inject web components for layouts

Classes

Class	Description
AcNgWebComponentModule

Variables

Variable	Description
VERSION	Version and build number of the package

4f6e050> 4f @acoustic-content-sdk/ng-web-component > AcNgWebComponentModule

AcNgWebComponentModule class

Signature:

export declare class AcNgWebComponentModule 

Properties

Property	Modifiers	Type	Description
VERSION		WchSdkVersion	Exposes the version information of this module

Home > ; @acoustic-content-sdk/ng-web-component > VERSION

VERSION variable

Version and build number of the package

Signature:

VERSION: {
    version: {
        major: string;
        minor: string;
        patch: string;
        branch: string;
    };
    build: Date;
}

首页 > @acoustic-content-sdk/ng-web-component > AcNgWebComponentModule > VERSION

AcNgWebComponentModule.VERSION property

暴露这个模块的版本信息

Signature:

VERSION: WchSdkVersion;