Question

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

为此，我在应用程序的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将npm install --prefix ./ lit-element安装在comp-new目录中。

我还在项目本身中做了一个npm install lit-element，因此npm模块肯定可用。

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

这是它在DOM中的外观：

这是我的项目结构：

Answer 1

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

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

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

在项目中安装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元素现在应该在您的应用程序中可见！：-）

注释：

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

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

聚合物LitElement和Angular-永不渲染，不显示任何内容

1 个答案: