2

我正在尝试创建一个 UI 工具包作为可重用的 Web 组件（使用角度元素）。我已经进行了一次测试运行，以查看我们在 Angular 项目中开发的自定义元素是否也可以在该 Angular 项目中使用（简单地说，我想为 UI 工具包创建一个类似页面的文档 + 我该如何测试我正在开发的 UI 组件 - 在同一个项目中）。

这是 stackblits 的链接 https://stackblitz.com/edit/angular-elements-test-kavinda

我使用了一个名为按钮模块的单独模块来开发 ui 组件，并且自定义元素定义也在该模块中完成。我尝试了 app-component.html 来使用那些元素——但没有奏效。

Primary-btn-component.html

<button>
  <slot name="icon_left" class="icon_left"></slot>
  <slot name="btn_text" class="btn_text"></slot>
  <slot name="icon_right" class="icon_right"></slot>
</button>

用于定义自定义元素的代码

const btnElem = createCustomElement(PrimaryBtnComponent, { injector: this.injector });
customElements.define('primary-btn', btnElem);

然后在 app-component.html 中使用该元素，如下所示

<primary-btn>
  <span slot="btn_text">Button</span>
</primary-btn>
4

2 回答 2

2

创建一个没有应用程序的项目

ng new my-lib --create-application=false

然后添加一个库

ng generate library my-lib

然后添加一个使用该库的演示应用程序

ng generate application my-lib-demo

详细步骤在这篇文章中。

https://nezhar.com/blog/up-and-running-library-development-with-angular-7/

于 2019-05-15T05:18:56.090 回答
0

找到了解决办法。我使用了这个Web-Components ES5 适配器

<script src="https://unpkg.com/@webcomponents/webcomponentsjs@2.1.3/custom-elements-es5-adapter.js"></script>

在 index.html 中使用它（在 head 部分内部）

于 2019-05-15T06:04:57.613 回答