瓦丁 18 |使用 Littemplate 从客户端调用服务器

问题描述

我正在尝试使用 littemplate 从客户端调用服务器端函数。我检查了 Vaadin 站点上的示例，发现客户端可以通过 this.$server._some_method 调用服务器端。 我尝试在 littemplate 中使用 $server，但在前端编译期间，vaadin 抛出错误，指出“类型 'HelloWorld' 上不存在属性 '$server'。” 请让我知道这个程序有什么问题并指导我。 谢谢。

灯光模板

import {LitElement,html} from 'lit-element';
import '@vaadin/vaadin-button/vaadin-button.js';

class HelloWorld extends LitElement {
    render() {
        return html`
            <div>
               <vaadin-button id="helloButton">Click me!</vaadin-button>
            </div>`;
    }
    
    sayHello(){
        showNotification("Hello");
        this.$server.greet(); //Problematic statement.
    }
}

customElements.define('hello-world',HelloWorld);

Java

package com.example.application.littemplate;

import com.vaadin.flow.component.Tag;
import com.vaadin.flow.component.button.Button;
import com.vaadin.flow.component.dependency.JsModule;
import com.vaadin.flow.component.littemplate.LitTemplate;
import com.vaadin.flow.component.notification.Notification;
import com.vaadin.flow.component.template.Id;
import com.vaadin.flow.component.textfield.TextField;


//HelloWorld.java
@Tag("hello-world")
@JsModule("./views/littemplate/hello-world.ts")
public class HelloWorld extends LitTemplate {

@Id
// Uses the vaadin-button id "helloButton"
private Button helloButton;

public HelloWorld() {
   helloButton.addClickListener(event -> Notification.show("Hello " + nameField.getValue()));

}

@ClientCallable
    public void greet() {
        System.out.println("Hello server");
    }

}

解决方法

Typescript 不知道 LitTemplate 有一个 $server 变量。你必须自己定义它。 您可以使用类型 any 或定义您的接口。 例如：

private $server?: MyTestComponentServerInterface;

并添加 @ClientCallable 函数：

    interface MyTestComponentServerInterface {
        greet(): void;
    }

就您而言，您的打字稿可能是：

import {LitElement,html} from 'lit-element';
import '@vaadin/vaadin-button/vaadin-button.js';

class HelloWorld extends LitElement {
    private $server?: HelloWorldServerInterface;
    render() {
        return html`
            <div>
               <vaadin-button id="helloButton">Click me!</vaadin-button>
            </div>`;
    }
    
    sayHello(){
        showNotification("Hello");
        this.$server!.greet(); // should work with autocompletion
    }
}
interface HelloWorldServerInterface {
   greet(): void;
}
customElements.define('hello-world',HelloWorld);