Question

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

（index）：28 Uncaught TypeError：comp.hideDataPanel不是函数在HTMLDocument。（（指数）：28）

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

在此之前，我正在使用stencil server-dev

尝试以下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应用程序启动时绑定我的模板组件方法。我怎么做？我应该等待页面或组件生命周期中的特定事件来解决组件方法吗？

提前谢谢

Answer 1

也许我的理解是错误的，我从来没有使用过这个活动，但是according to mdn听起来像是＆＃34; DomContentLoaded＆＃34;加载HTML DOM时会触发事件。我觉得加载我们的web组件太早了，因为他们来自JS。因此，您需要注册一个在加载整个页面（包括JS）时触发的事件，我猜是window.load。

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

模板组件方法定义

1 个答案: