如何将 Polymer.AppNetworkStatusBehavior 扩展为 Polymer2 中的自定义 Mixin？答案

【问题标题】：How to extend Polymer.AppNetworkStatusBehavior into custom Mixin in Polymer2?如何将 Polymer.AppNetworkStatusBehavior 扩展为 Polymer2 中的自定义 Mixin？
【发布时间】：2017-10-25 19:31:50
【问题描述】：

在 Polymer 1.0 中，我有以下代码 sn-p:-

CustomBehaviorImpl = {
  properties: {
    // Define property here...
    // ...
  },
  // Other custom behaviors definition
  // ...
};

CustomBehavior = [
  Polymer.AppNetworkStatusBehavior,
  CustomBehaviorImpl,
];

如何在 Polymer 2.0 中创建 CustomMixin 类。

【问题讨论】：

标签： polymer-2.x

【解决方案1】：

如果您将 mixins 分离到自己的文件中，则可以在组合使用 mixins 的元素时将它们作为 Html 导入依赖项引用。只需使用您的自定义行为扩展您的 Polymer 类即可。

我认为这个问题已经在 stackoverflow 上得到了回答。
看看这个：

Applying Behaviors with JS Mixins in Polymer 2

示例

这是我的 CustomMixin.html

<script>

  // CustomMixin provides the _customMixin function

  var CustomMixin = function(superClass) {
     return class extends superClass {

        _customMixin() {

        }

     }
  }
</script>

这是我使用 CustomMixin 的聚合物元素。

<link rel="import" href="../../bower_components/polymer/polymer-element.html">
<link rel="import" href="../CustomMixin/CustomMixin.html">
<dom-module id="my-element">
  <template>
    <style>
     :host {
        display: block;
    }
    </style>
  </template>
  <script>
    class MyElement extends CustomMixin(Polymer.Element) {
      static get is() { return 'my-element'; }
      static get properties() {
        return {
        };
      }
      ready() {
        super.ready();
      }

    }
    window.customElements.define(MyElement.is, MyElement);
  </script>
</dom-module>

我实际上从未测试过该代码，但我相信这应该是实现自定义 mixin 的方式。

【讨论】：

我已阅读“在 Polymer 2 中使用 JS MIxins 应用行为”，但无法真正理解代码的实际工作原理。你能给出基于我上面示例的实际代码吗？
我添加了一个示例，说明如何将放置在额外文件中的自定义 mixin 添加到现有的 Polymer 元素中。我正在使用带有类样式元素的混合行为。
我知道根据您的示例定义自定义 mixin，我的问题是“如何将 Polymer.AppNetworkStatusBehavior 扩展到 Polymer2 中的 CustomMixin”？
哦，对不起。不得不说我不太确定那里最好的方法是什么，但我相信你可以直接用它扩展你的自定义元素，或者只是将它复制到你的 mixin 中，然后根据你的需要进行更改。