Vaadin Designer选项卡未正确添加子项”；标签"；到选项卡对象

我正在使用Vaadin Deisgner 14.6.1创建一些超级简单的选项卡。但是，当我尝试在java类中执行一些简单操作（例如选择选项卡）时，它会抛出一个错误，表明“Tabs”对象没有正确的子“tab”组件。下面是一个简单的测试用例。（我在尝试将

addSelectedChangeListener（）

添加到tabs类时发现了这个问题，并发现它永远不会启动，可能是因为“tabs”类从来没有正确的子类。）我尝试了一系列的破解，但没有任何效果。（过去，如果我坚持纯粹的编程方法，我会让标签工作，但我真的很喜欢使用Designer，因为它节省了我大量的时间，并使代码非常模块化和干净……当它工作时……）

从'@polymer/polymer/polymer element.js'导入{html，polymererelation}；
导入“@vaadin/vaadin ordered layout/src/vaadin vertical layout.js”；
导入“@vaadin/vaadin-tabs/src/vaadin-tabs.js”；
导入“@vaadin/vaadin-tabs/src/vaadin-tab.js”；
类MyTabtest扩展了聚合关系{
静态获取模板（）{
返回html`
：主持人{
显示：块；
身高：100%；
}
表一
标题较长的选项卡二
表三
第1页
第2页
第3页
`;
}
静态get是（）{
返回'my tabtest'；
}
静态获取属性（）{
返回{
//在这里申报你的财产。
};
}
}
定义（MyTabtest.is，MyTabtest）；

及

package com.deepsearch.fe.tab2vizdb.fpsgraphicaldetails.spectratab.hslspectrachartandalts；
导入com.vaadin.flow.component.html.Label；
导入com.vaadin.flow.component.polymertemplate.Id；
导入com.vaadin.flow.component.tabs.Tab；
导入com.vaadin.flow.component.tabs.tabs；
导入com.vaadin.flow.router.Route；
导入com.vaadin.flow.templatemodel.templatemodel；
导入com.vaadin.flow.component.Tag；
导入com.vaadin.flow.component.dependency.JsModule；
导入com.vaadin.flow.component.polymertemplate.polymertemplate；
/**
*设计器为my tabtest模板生成的组件。
*
*设计器将添加和删除带有@Id映射的字段，但
*不会覆盖或以其他方式更改此文件。
*/
@路线（“tabtest”）
@标签（“我的标签测试”）
@JsModule（“./src/my tabtest.js”）
公共类MyTabtest扩展了PolymerTemplate{
@Id（“选项卡”）
私人标签；
@Id（“表1”）
私有选项卡tab1；
@Id（“表2”）
私有选项卡tab2；
@Id（“表3”）
私有选项卡tab3；
@Id（“lbl1”）
自有品牌lbl1；
@Id（“lbl2”）
自有品牌lbl2；
@Id（“lbl3”）
自有品牌lbl3；
/**
*创建一个新的MyTabtest。
*/
公共MyTabtest（）{
//tabs.setSelectedTab（tab2）；//抛出错误！
tabs.addSelectedChangeListener（e->{
System.out.println（“选择了一个选项卡！”）；//这永远不会触发！！！！
});
}
/**
*此模型在MyTabtest和MyTabtest之间绑定属性
*/
公共接口MyTabtestModel扩展了TemplateModel{
//在此处添加模板属性的setter和getter。
}
}

---

最终，我试图捕获一个tab select事件——但在Designer中创建选项卡时，它似乎不起作用……Vaadin方面也是这样吗？（即这是可复制的吗？

这是组件映射到模板中定义的元素的一个不幸限制。映射到Java时，不会保留父子关系，因此

tabs

组件没有意识到

tab

是其子组件之一

看

---

使其工作的方法是在Java中创建

选项卡

和

选项卡

实例，在Designer中创建其余的实例。

您能分享看到的错误的堆栈跟踪吗？

import {html, PolymerElement} from '@polymer/polymer/polymer-element.js';
import '@vaadin/vaadin-ordered-layout/src/vaadin-vertical-layout.js';
import '@vaadin/vaadin-tabs/src/vaadin-tabs.js';
import '@vaadin/vaadin-tabs/src/vaadin-tab.js';

class MyTabtest extends PolymerElement {

    static get template() {
        return html`
<style include="shared-styles">
                :host {
                    display: block;
                    height: 100%;
                }
            </style>
<vaadin-vertical-layout theme="spacing" style="width: 100%; height: 100%;">
 <vaadin-tabs theme="equal-width-tabs" id="tabs" orientation="horizontal" selected="0">
  <vaadin-tab id="tab1" selected>
    Tab one 
  </vaadin-tab>
  <vaadin-tab id="tab2">
    Tab two with a longer title 
  </vaadin-tab>
  <vaadin-tab id="tab3">
    Tab three 
  </vaadin-tab>
 </vaadin-tabs>
 <label id="lbl1">page1</label>
 <label id="lbl2">page2</label>
 <label id="lbl3">page3</label>
</vaadin-vertical-layout>
`;
    }

    static get is() {
        return 'my-tabtest';
    }

    static get properties() {
        return {
            // Declare your properties here.
        };
    }
}

customElements.define(MyTabtest.is, MyTabtest);

package com.deepsearch.fe.tab2vizdb.fpsgraphicaldetails.spectratab.hslspectrachartandalts;

import com.vaadin.flow.component.html.Label;
import com.vaadin.flow.component.polymertemplate.Id;
import com.vaadin.flow.component.tabs.Tab;
import com.vaadin.flow.component.tabs.Tabs;
import com.vaadin.flow.router.Route;
import com.vaadin.flow.templatemodel.TemplateModel;
import com.vaadin.flow.component.Tag;
import com.vaadin.flow.component.dependency.JsModule;
import com.vaadin.flow.component.polymertemplate.PolymerTemplate;

/**
 * A Designer generated component for the my-tabtest template.
 *
 * Designer will add and remove fields with @Id mappings but
 * does not overwrite or otherwise change this file.
 */
@Route("tabtest")
@Tag("my-tabtest")
@JsModule("./src/my-tabtest.js")
public class MyTabtest extends PolymerTemplate<MyTabtest.MyTabtestModel> {

    @Id("tabs")
    private Tabs tabs;
    @Id("tab1")
    private Tab tab1;
    @Id("tab2")
    private Tab tab2;
    @Id("tab3")
    private Tab tab3;
    @Id("lbl1")
    private Label lbl1;
    @Id("lbl2")
    private Label lbl2;
    @Id("lbl3")
    private Label lbl3;

    /**
     * Creates a new MyTabtest.
     */
    public MyTabtest() {
      //  tabs.setSelectedTab(tab2); //throws error!
        tabs.addSelectedChangeListener(e -> {
            System.out.println("A tab got selected!"); //this never fires!!!!
        });
    }

    /**
     * This model binds properties between MyTabtest and my-tabtest
     */
    public interface MyTabtestModel extends TemplateModel {
        // Add setters and getters for template properties here.
    }
}