TwinCAT 3 HMI：如何通过用户控件内的按钮删除该用户控件实例

我完全理解你遇到的问题——在TwinCAT HMI里动态生成的用户控件，想通过内部按钮删除自身，但拿不到控件的层级关系对吧？这是因为TcHMI的控件事件上下文和普通网页DOM不一样，咱们一步步来解决：

为什么你的当前方法无效？ #

在TwinCAT HMI的控件事件中，默认的this指向的是HMI项目的全局上下文（就是你看到的那个JSON对象），而不是触发事件的按钮控件，所以this.parentElement自然返回undefined。而且TcHMI有自己的控件层级管理体系，不能直接用DOM的parentElement来获取父控件。

解决方案1：在用户控件内部实现删除逻辑（推荐） #

这种方法最符合代码封装的思路，把删除逻辑直接放在用户控件内部：

1. 打开你的用户控件的Script.ts（或Script.js）文件，添加一个自定义方法用于删除自身：

// 假设你的用户控件类名为MyCustomUserControl
class MyCustomUserControl extends TcHmi.Controls.System.TcHmiControl {
    // 保留原有构造函数和初始化代码

    /**
     * 删除当前用户控件实例的方法
     */
    deleteSelf() {
        // 获取当前用户控件的父容器控件
        const parentContainer = this.getParentControl();
        if (!parentContainer) {
            console.warn("无法找到父容器，无法删除控件");
            return;
        }

        // 从父容器中移除当前用户控件
        parentContainer.removeChild(this);
        // 销毁控件以释放资源（可选但推荐，避免内存泄漏）
        this.destroy();
    }
}

// 保留原有控件注册代码
TcHmi.Controls.registerEx('MyCustomUserControl', 'TcHmi.Controls.System', MyCustomUserControl);

2. 回到用户控件的Content.tchmi文件，选中删除按钮，在右侧属性面板的Events里找到onMouseClick事件，将事件处理函数设置为this.deleteSelf。

这样当点击按钮时，就会调用用户控件自身的deleteSelf方法，方法里的this就是当前用户控件实例，能顺利获取父容器并移除自己。

解决方案2：在动态创建控件时绑定事件（适合外部控制场景） #

如果你需要在动态创建用户控件的代码里统一处理删除逻辑，可以这样做：

// 动态创建用户控件实例
const newUserControl = await TcHmi.ControlFactory.createEx({
    type: 'MyCustomUserControl',
    id: `CustomUserControl_${Date.now()}`, // 生成唯一ID避免冲突
    parent: TcHmi.Controls.getControlById('YourContainerId') // 替换成你的目标容器ID
});

// 获取用户控件内的删除按钮（假设按钮在用户控件内的ID是DeleteButton）
const deleteButton = newUserControl.getChildControl('DeleteButton');
if (deleteButton) {
    // 给按钮绑定点击事件
    deleteButton.on('onMouseClick', () => {
        // 获取父容器并移除用户控件
        const parentContainer = newUserControl.getParentControl();
        if (parentContainer) {
            parentContainer.removeChild(newUserControl);
            newUserControl.destroy();
        }
    });
}

这种方法需要你提前知道用户控件内删除按钮的ID，通过getChildControl获取按钮实例后绑定事件，直接操作创建好的用户控件实例。

关键知识点 #

• TcHMI控件的层级关系要用getParentControl()和getChildControl()来操作，不要用DOM的parentElement/children方法。
• 控件移除后调用destroy()方法可以释放资源，避免长期运行出现内存泄漏问题。
• 在用户控件内部定义方法时，this会自动指向当前用户控件实例，这是封装控件逻辑的最佳实践。

备注：内容来源于stack exchange，提问作者stevehappy321