Polymer LitElement & Angular - визуализация никогда не вызывается, контент не отображается - PullRequest
Новая
       7

Polymer LitElement & Angular - визуализация никогда не вызывается, контент не отображается

0 голосов
/ 25 февраля 2019

Я хочу использовать Polymers LitElement в своем приложении Angular.

Для этого я создал пример компонента (test.js) в папке assets моего приложения и импортировал его в index.html.

test.js:

// Import the LitElement base class and html helper function
import { LitElement, html } from '../../../node_modules/lit-element/lit-element';

// Extend the LitElement base class
class Test extends LitElement {

  render(){
    return html`
      <h1>Test works!</h1>
    `;
  }
}
// Register the new element with the browser.
customElements.define('ti8m-test', Test);

index.html: 

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>NgInAction</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">

  <script type="module" src="/assets/comp-new/default/src/ti8m/test.js"></script>

</head>
<body>
  <app-root></app-root>
</body>
</html>

Я установил lit-element в новый каталог comp, используя npm install --prefix ./ lit-element.

Я также сделал npm install lit-element в самом проекте,поэтому модуль npm определенно доступен.

Однако, когда я запускаю свое приложение Angular, используя ng serve, и перехожу по URL-адресу, куда я включил свой тестовый компонент, я нахожу свой компонент в DOM (используя инспектор), но контент не отображается.Кроме того, когда я помещаю console.log в функцию render, я никогда не вижу вывод в браузере.Похоже, метод никогда не вызывается.

Вот как он выглядит в DOM:

enter image description here

Вот моя структура проекта:

enter image description here

1 Ответ

0 голосов
/ 26 февраля 2019

Хорошо.Еще раз, решая свои собственные проблемы, надеясь помочь кому-нибудь с подобной проблемой;)

Прежде всего: Мой подход был не лучшим.Я бы не рекомендовал помещать ваши пользовательские элементы в папку активов.Обычно вы получаете свои пользовательские элементы, устанавливая модуль npm, поэтому я переместил компоненты в структуру проекта.Таким образом, я мог бы также избавиться от дополнительных узлов node_modules, и импорт стал намного проще обрабатывать.

Как использовать пользовательские компоненты Lit Element в Angular:

  1. Install lit-elemnt в вашем проекте: npm install --save lit-element
  2. Создайте папку в вашей папке src/app для всех пользовательских компонентов (например, custom-components)
  3. Создайте свой компонент (JS или TS, я выбралTS) 

import { LitElement, html } from 'lit-element';

// Extend the LitElement base class
// export the class, so it can be imported where it is needed
export class Ti8mTestComponent extends LitElement {

  /**
   * Implement `render` to define a template for your element.
   *
   * You must provide an implementation of `render` for any element
   * that uses LitElement as a base class.
   */
  render() {
    /**
     * `render` must return a lit-html `TemplateResult`.
     *
     * To create a `TemplateResult`, tag a JavaScript template literal
     * with the `html` helper function:
     */

    console.log('test-component', this);
    return html`
      <h1>Test works!</h1>
      <p>For real though!</p>
    `;
  }
}

Обратите внимание, как я пропустил часть customElements.define('ti8m-test', Ti8mTestComponent).Мы вернемся к этому через секунду.

Вы можете определить свои пользовательские элементы, где вы хотите в вашем коде.Я предлагаю либо main.ts, NgModule, либо в конструкторе компонента, в котором вы хотите использовать элемент.

import {Ti8mTestComponent} from './app/custom-elements/ti8m/test'; ... customElements.define('ti8m-test', Ti8mTestComponent);

Вот и все!Ваш элемент Lit должен быть виден в вашем приложении сейчас!: -)

Примечания:

  1. Мне пришлось обновить до Angular 7, так как это первая версия, использующая Typescript> 3, которая необходима дляМодуль Lit Element npm.(Lit Element использует тип unknown в своем коде, который был представлен в Typescript 3)
  2. Также мне пришлось изменить target в tsconfig.json на es2015.(иначе вы столкнетесь с class constructors must be invoked with |new| ошибками консоли)

Веселитесь!Надеюсь, это поможет.

...