0

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

（索引）：28 未捕获的类型错误：comp.hideDataPanel 不是 HTMLDocument 中的函数。（（指数）：28）

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

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

先感谢您

4

1 回答 1

0

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

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

于 2018-04-11T12:54:28.500 回答