带有Angular2的聚合物纸菜单 [英] Polymer paper-menu with Angular2
本文介绍了带有Angular2的聚合物纸菜单的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试在Angular2 beta3中使用Polymer v1.0元素，但是出现问题.某些元素可以很好地工作，例如输入框.
I'm trying to user Polymer v1.0 elements with Angular2 beta3 and I'm having issues. Some elements work fine, such as input boxes.
但是，当我尝试使用纸张菜单或纸张下拉菜单时，它不起作用.
However, when I try and use paper-menu or paper-dropdown-menu it doesn't work.
如何使该plnkr正常工作?
How can I get this plnkr to work?
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>
推荐答案
您必须导入所有正在使用的元素.
You have to import all the elements you're using.
缺少
- 纸质物品
- paper-listbox
我还认为导入完整的polyfill很重要
I also think it's important to import full polyfills
<script src="https://cdn.rawgit.com/download/polymer-cdn/1.1.4/lib/webcomponentsjs/webcomponents.js"></script>
代替lite
<script src="https://cdn.rawgit.com/download/polymer-cdn/1.1.4/lib/webcomponentsjs/webcomponents-lite.js"></script>
这篇关于带有Angular2的聚合物纸菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
