Question

我有一个非常基本的尝试实施纸质菜单。但是渲染的HTML不正确并且会破坏交互。单击菜单项时，整个列表将消失。我已经确定了它是因为纸张项目元素没有在纸张菜单元素内的一个非常关键的div内呈现。

我的component.html看起来像这样：

<div>
    <paper-menu selected="0">
        <paper-item>Location 1</paper-item>
        <paper-item>Location 2</paper-item>
    </paper-menu>
</div>

然而，呈现的内容是这样的：

<div>
    <paper-menu role="menu" tabindex="0" selected="0" class="x-scope paper-menu-0">
      <div class="selectable-content style-scope paper-menu">
      </div>
      <paper-item role="option" tabindex="0" aria-disabled="false" class="x-scope paper-item-0">Location 1</paper-item>
      <paper-item role="option" tabindex="0" aria-disabled="false" class="x-scope paper-item-0">Location 2</paper-item>
    </paper-menu>
</div>

如果我在浏览器中操作渲染的HTML，以便close div标签正确包装了paper-item元素，那么交互就会起作用。

我做错了什么？

在我的index.html中，我有：

<script src="lib/webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="lib/paper-button/paper-button.html" />
<link rel="import" href="lib/paper-input/paper-input.html" />
<link rel="import" href="lib/paper-item/paper-item.html" />
<link rel="import" href="lib/paper-menu/paper-menu.html" />
<link rel="import" href="lib/paper-listbox/paper-listbox.html" />
<link rel="import" href="lib/paper-toggle-button/paper-toggle-button.html" />
<link rel="import" href="lib/paper-progress/paper-progress.html" />
<link rel="import" href="lib/paper-dropdown-menu/paper-dropdown-menu.html" />

在我的bower.json中，我引用了以下版本

{
  "name": "permit-manager-app",
  "private": true,
  "dependencies": {
    "polymer": "^1.4.0",
    "webcomponentsjs": "^0.7.22",
    "paper-button": "^1.0.11",
    "paper-input": "^1.1.10",
    "paper-progress": "^1.0.9",
    "paper-dropdown-menu": "1.2.1",
    "paper-menu": "1.2.2",
    "paper-item": "1.2.1",
    "paper-listbox": "1.1.2",
    "paper-toggle-button": "^1.1.2"

  }
}

这是Angular2 beta 17

Answer 1

我在同一个项目中遇到了类似的问题，其中包含了纸张下拉菜单，其中关键部分不合适，控件无效。

详细信息如下：

Polymer paper-dropdown-menu not rendered correctly in browser

Polymer Paper-Menu HTML在浏览器中无法正确呈现

1 个答案: