Использование угловых элементов внутри одного углового проекта - PullRequest
Новая
       21

Использование угловых элементов внутри одного углового проекта

1 голос
/ 15 мая 2019

Я пытаюсь создать UI kit как веб-компоненты многократного использования (используя угловые элементы). Я выполнил тестовый прогон, чтобы увидеть, могут ли пользовательские элементы, которые мы разрабатываем внутри углового проекта, также использоваться в этом угловом проекте (просто я хочу создать документацию наподобие страницы для набора пользовательского интерфейса + как я могу протестировать компоненты пользовательского интерфейса, которые я разрабатываю - внутри одного проекта).

Вот ссылка на стекблиты https://stackblitz.com/edit/angular-elements-test-kavinda

Я использовал отдельный модуль, называемый модулем кнопок, для разработки компонентов пользовательского интерфейса, и определение этого элемента также выполняется в этом модуле. И я попробовал app-component.html использовать эти слова - но это не сработало.

Primary-БТН-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>

Ответы [ 2 ]

2 голосов
/ 15 мая 2019

Создать проект без приложения 

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/

0 голосов
/ 15 мая 2019

Нашли исправление.Я использовал этот Web-компонент ES5 адаптер 

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

Используйте это в index.html (внутри раздела head)

...