带有 Angular2 的聚合物纸菜单

Question

我正在尝试将 Polymer v1.0 元素与 Angular2 beta3 一起使用，但我遇到了问题。有些元素工作正常，例如输入框。

但是，当我尝试使用 paper-menu 或 paper-dropdown-menu 时，它不起作用。

我怎样才能让这个 plnkr 工作？

http://plnkr.co/edit/2n7xWH0MViPtO8AwZwq2?p=preview

<!DOCTYPE html>
<html>
  <head>
    <title>Angular 2 QuickStart</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">    

    <script src="https://cdn.rawgit.com/download/polymer-cdn/1.1.4/lib/webcomponentsjs/webcomponents-lite.js"></script>

    <script>
      window.Polymer = window.Polymer || {};
      window.Polymer.dom = 'shadow';
    </script>

    <!-- 1. Load libraries -->
    <!-- IE required polyfills, in this exact order -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.33.3/es6-shim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.16/system-polyfills.js"></script>

    <script src="https://code.angularjs.org/2.0.0-beta.3/angular2-polyfills.js"></script>
    <script src="https://code.angularjs.org/tools/system.js"></script>
    <script src="https://code.angularjs.org/tools/typescript.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.3/Rx.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.3/angular2.dev.js"></script>

    <link rel="import" href="https://cdn.rawgit.com/download/polymer-cdn/1.1.4/lib/paper-menu/paper-menu.html" />
    <link rel="import" href="https://cdn.rawgit.com/download/polymer-cdn/1.1.4/lib/paper-dropdown-menu/paper-dropdown-menu.html" />

    <!-- 2. Configure SystemJS -->
    <script>
      System.config({
        transpiler: 'typescript', 
        typescriptOptions: { emitDecoratorMetadata: true }, 
        packages: {'app': {defaultExtension: 'ts'}} 
      });
      System.import('app/main')
            .then(null, console.error.bind(console));
    </script>

  </head>

  <!-- 3. Display the application -->
  <body>
    <my-app>Loading...</my-app>
  </body>

</html>

Answer 1

您必须导入您正在使用的所有元素。

缺少

的导入

论文项目
论文列表框

我也认为导入完整的 polyfills 很重要

<script src="https://cdn.rawgit.com/download/polymer-cdn/1.1.4/lib/webcomponentsjs/webcomponents.js"></script>

而不是精简版

    <script src="https://cdn.rawgit.com/download/polymer-cdn/1.1.4/lib/webcomponentsjs/webcomponents-lite.js"></script>

固定例子

Plunker example

带有 Angular2 的聚合物纸菜单

Polymer paper-menu with Angular2

polymer-1.0

angular