模板组件方法定义答案

【问题标题】：Stencil Component Method definition模板组件方法定义
【发布时间】：2025-11-26 11:25:01
【问题描述】：

我在开发 stencil.js Web 组件时遇到问题。我有这个错误：

(index):28 Uncaught TypeError: comp.hideDataPanel is not a function 在 HTML 文档。 ((索引):28)

我想将我的模板组件集成到更大的 browserify 项目中

在此之前，我正在使用模板服务器开发尝试以下 index.html

    <!DOCTYPE html>
    <html dir="ltr" lang="en">
    <head>
      <meta charset="utf-8">
      <title>Advanced SearchBar</title>
      <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0">
      <meta name="theme-color" content="#16161d">
      <meta name="apple-mobile-web-app-capable" content="yes">

      <meta http-equiv="x-ua-compatible" content="IE=Edge"/>
      <script src="/build/app.js"></script>

      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <!-- Added -->
      <link rel="manifest" href="/manifest.json">
    </head>
    <body>

      <advanced-searchbar target_url="http://localhost:1234/results" target_id="pdbCode"></advanced-searchbar>
      <script>

        document.addEventListener("DOMContentLoaded", function(event) {
          let comp = document.getElementsByTagName('advanced-searchbar')[0];
          comp.hideDataPanel(); // --> Does not work all the time
        })

        let comp = document.getElementsByTagName('advanced-searchbar')[0];
        comp.addEventListener('clickedOnResult',function(e){
          comp.hideDataPanel(); // --> Works Fine
        })
      </script>
    </body>
    </html>

我的组件的方法似乎在 DomContentLoaded 事件中未解决，而在异步用户单击事件中解决了相同的方法。请注意，由于打字稿代码中的@Method()，用户可以使用 .hideDataPanel() 方法（如下所示：https://stenciljs.com/docs/decorators）

为了将来的集成，我想在我的 Web 应用程序启动时绑定我的模板组件方法。我怎么做？我应该等待页面或组件生命周期中的特定事件来解决组件方法吗？

提前谢谢你

【问题讨论】：

标签： javascript typescript web-component stenciljs

【解决方案1】：

也许我的理解是错误的，我从未使用过该事件，但according to mdn 听起来像是在加载 HTML DOM 时触发了“DomContentLoaded”事件。我想现在加载我们的 web 组件还为时过早，因为它们来自 JS。因此，您需要注册一个在加载整个页面（包括 JS）时触发的事件，我猜是window.load。

您还可以在加载后尝试访问的模板组件中添加@Event()，并在componentDidLoad() 中添加.emit() 该事件。模板事件似乎在您的 dom-tree 中向上传播，因此它们最终会到达document。因此，您可以在该事件上注册和事件侦听器，例如： document.addEventListener('myCustomStencilEvent', handlerFunction);

【讨论】：

谢谢，我终于做到了，我确认它正在工作:)！