Question

I'm trying to create a UI kit as reusable web components (using angular elements). I have did a test run to see whether the custom elements that we are developing inside angular project, can be used within that angular project too (In simply, i want to create a documentation like page, for the UI kit + how can i test the UI components that i'm developing - inside the same project).

Here is the link to 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.p中使用该元素，如下所示：

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

Answer 1

创建没有应用的项目

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/

Answer 2

找到了解决方法。我使用了此 Web组件ES5适配器

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

在index.html（位于标题部分的内部）中使用此

Using angular elements inside the same angular project

2 个答案: