组件未在web上显示

Question

我正在使用polymer2将一个新网页添加到我的应用程序中。我已经做了类似的添加之前，但这一个真的不显示在页面上，即使我已经准备好导入和组件…我开始在观察我的代码时遇到了一些令人头疼的问题，试图找出错误所在，所以也许你们中的一些人会立即发现错误。

正如我之前所说的，我已经在应用程序上实现了其他页面，可能问题来自于我的新组件的“惰性导入”，但它对之前添加的其他组件工作得很好。

我试着寻找拼写错误的DOM或组件，但看起来一切正常

这是我转到其他页面的菜单

<!-- i import the components like that -->
<link rel="lazy-import" href="c2m-connexion.html">
<link rel="lazy-import" href="c2m-newPage.html">

<app-drawer-layout id="drawerLayout" force-narrow>
        <app-drawer id="drawer" slot="drawer" swipe-open="[[narrow]]">
          <app-toolbar>Menu</app-toolbar>
          <iron-selector selected="[[page]]" attr-for-selected="name" class="drawer-list" role="navigation">
            <div id="anonyme">
              <a name="connexion" href="[[rootPath]]connexion">Connexion</a>
              <a name="newPage" href="[[rootPath]]newPage">New Page !!</a>
            </div>

<!--[... Some other pages in the menu ...]-->

 <div id="top ">
      <iron-pages selected="[[page]]" attr-for-selected="name" fallback-selection="view404 " role="main ">
        <c2m-connexion name="connexion"></c2m-connexion>
        <c2m-newPage name="newPage" subroute="{{subroute}}"></c2m-newPage>
        <!-- other pages implemented the same way-->
      </iron-pages>
 </div>

我使用这个脚本是因为我的所有文件都有一个规范化的名称：

  // Load page import on demand. Show 404 page if fails
        let resolvedPageUrl = this.resolveUrl('c2m-' + page + '.html');
        Polymer.importHref(
          resolvedPageUrl,
          null,
          this._showPage404.bind(this),
          true);
      }

现在组件本身(c2m-newPage)：

<link rel="import" href="../bower_components/polymer/polymer-element.html">
<link rel="import" href="../bower_components/paper-input/paper-input.html">
<link rel="import" href="../bower_components/paper-button/paper-button.html">
<link rel="import" href="../bower_components/paper-checkbox/paper-checkbox.html">
<link rel="import" href="../bower_components/paper-card/paper-card.html">
<link rel="import" href="../bower_components/iron-ajax/iron-ajax.html">
<link rel="import" href="../bower_components/paper-dialog/paper-dialog.html">
<link rel="import" href="../bower_components/neon-animation/web-animations.html">
<link rel="import" href="../bower_components/neon-animation/neon-animated-pages.html">
<link rel="import" href="../bower_components/neon-animation/neon-animations.html">
<link rel="import" href="./components/sweet-alert.html">
<link rel="import" href="shared-styles.html">
<link rel="import" href="./services/c2m-service.html">
<link rel="import" href="components/c2m-menu-newPage.html">



<dom-module id="c2m-newPage">
    <!-- Defines the element's style and local DOM -->
    <template>
        <link rel="stylesheet" href="../style/main.css">
        <link rel="stylesheet" href="../style/util.css">
        <style is="custom-style" include="shared-styles">
            :host {
                display: flex;
                padding: 9px;
            }
            paper-input#email-input {
                width: 50%;
            }
            .card-content paper-dropdown-menu {
                width: 100%;
            }

        </style>

        <!-- I TRIED PUTTING SOME TEXT HERE ASWELL TO SEE IF THE COMPONENT WAS LOADING BUT NOTHING APPEARED -->

        <c2m-menu-newPage></c2m-menu-newPage>
        <!-- Services -->
        <c2m-service id="service"></c2m-service>
    </template>
    <script>
        class C2mNewPage extends Polymer.Element {
            /**
             * @inheritdoc
             **/
            connectedCallback() {
                super.connectedCallback();
            }
            static get is() {
                return 'c2m-newPage';
            }
        }
        customElements.define(C2mNewPage.is, C2mNewPage);
    </script>
</dom-module>

我希望页面显示一些东西，在这一点上，我试图放置的文本甚至没有显示，我认为如果我将一个

一些文本

它应该出现在页面上。所以我不知道它是从哪里来的。

​

谢谢你的回答！

Answer 1

将元素重命名为c2m-new-page可能会解决您的问题。

聚合物不适合大写字母，因为你的元素名为'c2m-newPage‘，在dom中可能找不到它，因为它会搜索小写字母的元素，或者用短划线小写替换大写的元素。