无法读取聚合物 2.0 中事件侦听器的属性答案

【问题标题】：Not able to read the property of eventlistner in polymer 2.0无法读取聚合物 2.0 中事件侦听器的属性
【发布时间】：2017-07-18 22:10:01
【问题描述】：

当组件在 dom 中准备好时，webcomponent-loader.js 无法调度事件。 document.dispatchEvent(new CustomEvent('WebComponentsReady', {bubbles: true})); 我正在尝试创建 wysiwyg-e 组件，当 dom 准备好时它不会让组件加载。由于 addEventListner，它停止为整个聚合物应用程序提供服务。

ERROR::Uncaught TypeError: Cannot read property 'addEventListener' of null

<dom-module id="custom-keybar">
     <template>
     <wysiwyg-e style="width: 100vw; height: 100vh;" id="wysiwygE">
        <wysiwyg-tool-bold></wysiwyg-tool-bold>
        <wysiwyg-tool-italic></wysiwyg-tool-italic>
        <wysiwyg-tool-underline></wysiwyg-tool-underline>
        <wysiwyg-tool-strike></wysiwyg-tool-strike>
        <wysiwyg-tool-color></wysiwyg-tool-color>
        <wysiwyg-tool-clear></wysiwyg-tool-clear>
        <wysiwyg-tool-code></wysiwyg-tool-code>
        <wysiwyg-tool-link></wysiwyg-tool-link>
        <wysiwyg-tool-image></wysiwyg-tool-image>
        <wysiwyg-tool-audio></wysiwyg-tool-audio>
        <wysiwyg-tool-video></wysiwyg-tool-video>
        <wysiwyg-tool-ordered></wysiwyg-tool-ordered>
        <wysiwyg-tool-unordered></wysiwyg-tool-unordered>
        <wysiwyg-tool-indent></wysiwyg-tool-indent>
        <wysiwyg-tool-outdent></wysiwyg-tool-outdent>
        <wysiwyg-tool-justify right center full></wysiwyg-tool-justify>
        <wysiwyg-tool-heading h1 h2 h3 h4 h5 h6></wysiwyg-tool-heading>
        <wysiwyg-tool-blockquote></wysiwyg-tool-blockquote>
    </wysiwyg-e>
    <iron-ajax url="../README.md" handle-as="text" id="ajax"></iron-ajax>
     </template>

     <script>
     window.addEventListener(
             'WebComponentsReady',
               function () {
                var ironAjax = document.querySelector('iron-ajax'), wysiwygE 
       = document.querySelector('wysiwyg-e');

                ironAjax.addEventListener(
                    'response',
                    function () {
                        var value = marked(this.lastResponse);
                        wysiwygE.value = value.replace(new 
         RegExp('https://miztroh.github.io/bower_components/wysiwyg-e/', 
                 'g'), '../');
                    }
                );

                ironAjax.generateRequest();
            // };
        // );
         </script>
       </dom-module>

【问题讨论】：

标签： javascript dom polymer polymer-2.x

【解决方案1】：

您能否尝试更多的 Polymer，并重写您的 <iron-ajax> 和 <script> 标签？例如

<iron-ajax url="../README.md" handle-as="text"
    auto on-response="handleResponse"></iron-ajax>

<script>
    class KeyBar extends Polymer.Element {
        handleResponse(event, request) {
            var value = marked(event.detail.response);
            // ...
        }
    }
    customElements.define('custom-keybar', KeyBar);
</script>

【讨论】：