Polymer LitElement & Angular - 从未调用渲染，不显示任何内容

Question

我想在我的 Angular 应用程序中使用 Polymers LitElement。

为此，我在应用程序的 assets 文件夹中创建了一个示例组件 (test.js)，并将其导入到 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>

我在 comp-new 目录下安装了 lit-element，使用 npm install --prefix ./ lit-element.

我在项目本身也做了一个npm install lit-element，所以npm模块肯定是可以的

但是，当我运行我的 Angular 应用程序使用 ng serve，并导航到我包含我的测试组件的 URL 时，我发现我的组件在DOM（使用检查器），但是没有显示任何内容。此外，当我将 console.log 放入 render 函数时，我从未在浏览器中看到输出。所以看起来该方法从未真正被调用过。

这是 DOM 中的样子：

这是我的项目结构：

Answer 1

好的。再次解决我自己的问题，希望能帮助到有类似问题的人;)

首先： 我的方法不是最好的。我不建议将您的自定义元素放入资产文件夹中。通常你会通过安装一个 npm 模块来获得你的自定义元素，所以我将这些组件移到了项目结构中。像这样，我也可以摆脱额外的 node_modules 并且导入更容易处理。

如何在 Angular 中使用 Lit 元素自定义组件：

在您的项目中安装 lit-elemnt：npm install --save lit-element
在您的 src/app 文件夹中为所有自定义组件（即 custom-components）创建一个文件夹
创建您的组件（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 Element 现在应该在您的应用程序中可见！ :-)

备注：

我不得不更新到 Angular 7，因为这是第一个使用 Typescript > 3 的版本，这是 Lit Element npm 模块所需要的。（Lit Element 在其代码中使用类型 unknown，这是由 Typescript 3 引入的）
我还必须将 tsconfig.json 中的 target 更改为 es2015。（否则你会运行进入 class constructors must be invoked with |new| 控制台错误）

玩得开心！希望对你有帮助。

Polymer LitElement & Angular - 从未调用渲染，不显示任何内容

Polymer LitElement & Angular - render never called, no content displayed

polymer

angular

lit-element