Question

有没有办法在Polymer 2.0中声明可以在其他组件中使用的全局函数？我有一个moment.html文件，用于在项目中使用moment.js：

<script src="../bower_components/moment/moment.js"></script>

在同一个文件中，我还声明了一个函数，而不是在我想要使用它的每一个组件中声明它：

<script>
  function format(date) {
    return moment(date).format('dddd, D MMMM YYYY');
  }
</script>

导入文件后moment对象可用，但当我尝试调用format函数时，它会向我发出警告method 'format' not defined。如何将该功能公之于众？

编辑：我可以在另一个组件的脚本标记内调用format函数，但我无法从模板中访问它，即：

<strong>[[format(event.date)]]</strong>

我想从页面上的函数渲染结果，而不是以编程方式访问它。

Answer 1

我认为，对于你的任务，最好的文件是Monica Dinculescu自己的备忘单。

https://meowni.ca/posts/polymer-2-cheatsheet/#defining-a-mixin

她是一名聚合物开发人员。下面是我从链接复制粘贴。它是真正具有魔力的extends MyMixin(Polymer.Element)。

定义类表达式mixin以在不同元素之间共享实现：

<script>
  MyMixin = function(superClass) {
    return class extends superClass {
      // Code that you want common to elements.
      // If you're going to override a lifecycle method, remember that a) you
      // might need to call super but b) it might not exist
      connectedCallback() {
        if (super.connectedCallback) {
          super.connectedCallback();
        }
        /* ... */
      }
    }
  }
</script>

在元素定义中使用mixin：

<dom-module id="element-name">
  <template><!-- ... --></template>
  <script>
    // This could also be a sequence:
    //class MyElement extends AnotherMixin(MyMixin(Polymer.Element)) { … }
    class MyElement extends MyMixin(Polymer.Element) {
      static get is() { return 'element-name' }
      /* ... */
    }
    customElements.define(MyElement.is, MyElement);
  </script>
</dom-module>

Answer 2

以下是我如何工作的示例;

2.1.1

Answer 3

由于您的format_function位于影子根目录中，因此您必须使用.shadowRoot.querySelector

下面的

是我的工作代码，我在format_funtion中有page1并在page2

中调用它

＆＃13;

<script src="https://polygit.org/components/webcomponentsjs/webcomponents-loader.js"></script>
<link rel="import" href="https://polygit.org/components/polymer/polymer-element.html">


<!-- my-app element -->
<dom-module id="my-app">
  <template>   
    <my-page1></my-page1>
    <my-page2></my-page2> 
  </template>
  <script>
    class MyApp extends Polymer.Element {
      static get is() {
        return 'my-app'
      }
      constructor() {
        super();
      }
    }
    window.customElements.define(MyApp.is, MyApp);
  </script>
</dom-module>


<!-- page1 element -->
<dom-module id="my-page1">
  <script>
    class MyPage1 extends Polymer.Element {
      static get is() {
        return 'my-page1';
      }
      constructor() {
        super();
      }
      format_function() {
        alert("in format function");
      }
    }
    window.customElements.define(MyPage1.is, MyPage1);
  </script>
</dom-module>

<!-- page2 element -->
<dom-module id="my-page2">
  <template> <div on-click="test">click to test format_funtion.....!</div></template>
  <script>
    class MyPage2 extends Polymer.Element {
      static get is() {return 'my-page2';}
      
      test() {
        var host = document.querySelector('my-app').shadowRoot.querySelector('my-page1');
        host. format_function();
      }
    }
    window.customElements.define(MyPage2.is, MyPage2);
  </script>
</dom-module>



<!-- calling element -->
<my-app></my-app>

＆＃13;

请勿忘记导入文件，例如page.html或page2.html

Polymer 2.0中的全局功能

3 个答案: