5

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

为此，我在应用程序test.js的文件夹中创建了一个示例组件 ( ) assets，并将其导入到index.html.

测试.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);

索引.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-new 目录中，使用npm install --prefix ./ lit-element.

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

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

下面是它在 DOM 中的样子：

在此处输入图像描述

这是我的项目结构：

在此处输入图像描述

4

1 回答 1

10

好的。再次解决我自己的问题，希望能帮助任何有类似问题的人；）

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

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

  1. 在您的项目中安装 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)部分的。我们马上就会讲到这个。

  1. 您可以在代码中的任何位置定义自定义元素。我建议使用main.tsNgModule，或者在要使用该元素的组件的构造函数中。

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

就是这样！您的 Lit Element 现在应该在您的应用程序中可见！:-)

笔记：

  1. 我不得不更新到 Angular 7，因为这是第一个使用 Typescript > 3 的版本，这是 Lit Element npm 模块所需要的。（Lit Elementunknown在其代码中使用了 type，这是由 Typescript 3 引入的）
  2. 我也不得不将targetin更改tsconfig.json为es2015. （否则你会遇到class constructors must be invoked with |new|控制台错误）

玩得开心！我希望它有所帮助。

于 2019-02-26T08:27:59.427 回答