與Angular2的聚合物紙菜單

我正在嘗試使用Angular2 beta3的用戶聚合物v1.0元素，並遇到問題。一些元素正常工作，如輸入框。與Angular2的聚合物紙菜單

但是，當我嘗試使用紙張菜單或紙張下拉菜單時，它不起作用。

我怎樣才能讓這個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>

來源

2016-02-12 dvulanov

你必須導入所有你使用的元素。

進口失蹤的

紙項目
紙列表框

我也想導入全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的固定例子。

來源

2016-02-12 07:43:47

謝謝，它現在呈現正常。但是，對於你的運動員，我無法從下拉菜單中選擇。或者，如果我嘗試通過向列表框元素添加：selected =「1」來預先設置選區，則不起作用。是否還有其他缺失的內容？ – dvulanov

當您使用'paper-menu'而不是'paper-listbox'時，選擇似乎正常工作。我不知道'paper-listbox'是否應該以這種方式使用。 –

這些聚合物元素從聚合物演示頁面拉出。所以我認爲paper-listbox是用於在紙張下拉菜單中使用的（它在演示頁面上工作正常）。如果我嘗試在紙張下拉菜單中使用紙張菜單，則不起作用。而且，似乎僅僅使用紙張列表框本身也沒有效果。真的，我所追求的是一個有效的下拉選擇。 – dvulanov

與Angular2的聚合物紙菜單

回答

相關問題