polymer-2.x - 组件未在网页上显示
问题描述
我正在使用 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>
我希望页面显示一些东西,此时我试图放置的文本甚至没有显示,我想如果我放一个
一些文字
它应该出现在页面上。所以我不知道它来自哪里。感谢您的回答!
解决方案
将元素重命名为 c2m-new-page 可能会解决您的问题。
Polymer 不适用于大写字母,因为您的元素名称为“c2m-newPage”,在 dom 中使用时可能无法找到它,因为它会搜索带有小写字母或大写字母替换为破折号的元素-小写。
推荐阅读
- python - 无法正确将数组转换为图像
- dockerfile - 使用具有多阶段构建的 Dockerfile 为每个构建参数命名一个阶段
- c++ - 指针和 c 样式数组变量的专用模板
- php - 如何在 Laravel 5.7 中上传数据库中的图像?
- file-pointer - 使用 cat 命令,为什么会这样打印结果?
- android - 自定义视图和 defStyleAttr
- c# - 追逐 AI 的 Raycast 问题
- android - (已解决)检查 sqlite 条目的功能不起作用
- spring-boot - 通过 IntelliJ 运行 Spring Boot Application.main() 找不到我的本地配置文件
- amazon-cloudwatch - 入口点的 ECS 计划任务容器覆盖不起作用