如何将 javascript 文件包含到 Vaadin 14 litlement 组件中

Question

如何将 JavaScript 库文件包含到 Vaadin 14 中的 LitElement 模板组件中？我想加载一个文件并在组件附加到组件层次结构时自动执行它。

Answer 1

如果您想加载外部库并在 LitElement 中使用它，但又想在 Java 中管理它，您可以构建一个 Java 类：

@JsModule("./my-test-component.ts")
@Tag("my-test-component")
public class MyTestComponent extends Component {

    public MyTestComponent() {
    }


    public String getTest() {
        return getElement().getProperty("test");
    }

    public void setTest(String test) {
        getElement().setProperty("test", test);
    }

}

该标签很重要，因为这是 JavaScript/Typescript 和 Java 之间的链接。

您可以使用 Typescript（适用于 Vaadin 14.5+）或仅使用 JavaScript 创建 LitElement：

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


@customElement('my-test-component')
export class MyTestComponent extends LitElement {
    static get styles() {
        return css`
        :host {
            display: block;
        }
        `;
    }
    @property({ attribute: true })
    public test: String = "test";

    /**
     * Main method of the component
     *
     */
    render() {
        return html`Test attribute ${this.test}"`;
    }

}

在这种情况下，它不会对外部库执行任何操作。下一步是阅读外部库的文档并按照说明进行操作。