angular2中的造型聚合物元素

Question

我想将 Polymer Elements 包含到我的 angular2 应用程序中，因为 Angular2 Material 仍然没有提供足够的元素。此外，我想设置元素的样式，即设置它的宽度。我有

<paper-dropdown-menu class="dropdown" label="Wiederholung" vertical-align="bottom" horizontal-align="right">
    <paper-listbox class="dropdown-content">
        <paper-item>einmalig</paper-item>
        <paper-item>wöchentlich</paper-item>
        <paper-item>monatlich</paper-item>
    </paper-listbox>
</paper-dropdown-menu>

编辑

在我的 index.html 中有

<!-- polymer components -->
<script src="/node_modules/bower_components/webcomponentsjs/webcomponents.js"></script>
<script>
    window.Polymer = window.Polymer || {};
    window.Polymer.dom = 'shadow';
</script>

<link rel="import" href="/node_modules/bower_components/polymer/polymer.html">

<!-- custom style for polymer components -->
<style is="custom-style">
    :root {
        --paper-dropdown-menu : {
            width: 280px;
        }
    }
</style>

<link rel="import" href="/node_modules/bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
<link rel="import" href="/node_modules/bower_components/paper-listbox/paper-listbox.html">
<link rel="import" href="/node_modules/bower_components/paper-item/paper-item.html">
<link rel="import" href="/node_modules/bower_components/paper-input/paper-input.html">

有趣的是，我可以将 with 更改为即 100px，它将被应用。但它不会高于~250px；

Answer 1

在我的 index.html 中有这个解决了我的问题：

<script src="https://polygit.org/polymer+:master/components/webcomponentsjs/webcomponents-lite.min.js"></script>
<script>
/* this script must run before Polymer is imported */
window.Polymer = {
  dom: 'shadow',
  lazyRegister: true
};
</script>
<link href="https://polygit.org/polymer+:master/components/polymer/polymer.html" rel="import">
<link href="https://polygit.org/polymer+:master/components/paper-button/paper-button.html" rel="import">
<link href="https://polygit.org/polymer+:master/components/paper-dropdown-menu/paper-dropdown-menu.html" rel="import">
<link href="https://polygit.org/polymer+:master/components/paper-item/paper-item.html" rel="import">
<link href="https://polygit.org/polymer+:master/components/paper-listbox/paper-listbox.html" rel="import">
<link href="https://polygit.org/polymer+:master/components/paper-menu/paper-menu.html" rel="import">

<style is="custom-style">
    :root {
      --paper-dropdown-menu : {
        width: 280px;
      }
    }
</style>

Answer 2

你可以在index.html中使用这样的样式元素

<style is="custom-style">
  :root {
    --paper-dropdown-menu: {
      /* add styles here */
    }
  }
</style>

或者您可以将您的 Polymer 元素包装在自定义 Polymer 元素中，包括包装 HTML 的样式

<style>
  :root {
    --paper-dropdown-menu: {
      /* add styles here */
    }
  }
</style>

<paper-dropdown-menu class="dropdown" label="Wiederholung" vertical-align="bottom" horizontal-align="right">
    <paper-listbox class="dropdown-content">
        <paper-item>einmalig</paper-item>
        <paper-item>wöchentlich</paper-item>
        <paper-item>monatlich</paper-item>
    </paper-listbox>
</paper-dropdown-menu>

然后在你的 Angular 组件中像这样使用它

<some-name></some-name>

几篇文章解释了一些关于如何在 Angular2 中使用 Polymer 的主题

• https://dart.academy/dart-angular-2-and-polymer-together/
• https://dart.academy/polymer-controls-in-an-angular-2-form-with-dart/-https://dart.academy/two-way-binding-for-polymer-elements-in-angular-2-for-dart/

这些教程适用于 Polymer.dart 和 Angular2 for Dart，但将信息应用到 Polymer.js 和 Angular2 和 TS 应该不会太难。