模板组件方法定义

Question

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

(index):28 Uncaught TypeError: comp.hideDataPanel 不是一个函数在 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 应用程序启动时绑定我的模板组件方法。我怎么做？我应该等待页面或组件生命周期中的特定事件来解析组件方法吗？

提前致谢

Answer 1

也许我的理解是错误的，我从来没有使用过该事件，但是according to mdn 听起来 "DomContentLoaded" 事件在 HTML DOM 有被加载。我想加载我们的 webcomponents 还为时过早，因为它们来自 JS。所以你需要注册一个事件，当整个页面（包括 JS）已经加载时触发，我猜是 window.load.

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

模板组件方法定义

Stencil Component Method definition

javascript

web-component

typescript

stenciljs