Question

如何从iron-page中的其他页面获取范围，我正在使用starter-kit聚合物，我需要在这些视图中获取exec的方法

MY-app.html

<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/app-layout/app-drawer/app-drawer.html">
<link rel="import" href="../bower_components/app-layout/app-drawer-layout/app-drawer-layout.html">
<link rel="import" href="../bower_components/app-layout/app-header/app-header.html">
<link rel="import" href="../bower_components/app-layout/app-header-layout/app-header-layout.html">
<link rel="import" href="../bower_components/app-layout/app-scroll-effects/app-scroll-effects.html">
<link rel="import" href="../bower_components/app-layout/app-toolbar/app-toolbar.html">
<link rel="import" href="../bower_components/app-route/app-location.html">
<link rel="import" href="../bower_components/app-route/app-route.html">
<link rel="import" href="../bower_components/iron-pages/iron-pages.html">
<link rel="import" href="../bower_components/iron-selector/iron-selector.html">
<link rel="import" href="../bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="../bower_components/iron-icons/iron-icons.html">
<link rel="import" href="my-icons.html">


<dom-module id="my-app">
  <template>
    <style>
      :host {
        --app-primary-color: #4285f4;
        --app-secondary-color: black;

        display: block;
      }

      app-header {
        color: #fff;
        background-color: var(--app-primary-color);
      }
      app-header paper-icon-button {
        --paper-icon-button-ink-color: white;
      }

      .drawer-list {
        margin: 0 20px;
      }

      .drawer-list a {
        display: block;
        padding: 0 16px;
        text-decoration: none;
        color: var(--app-secondary-color);
        line-height: 40px;
      }

      .drawer-list a.iron-selected {
        color: black;
        font-weight: bold;
      }
    </style>

    <app-location route="{{route}}"></app-location>
    <app-route
        route="{{route}}"
        pattern="/:page"
        data="{{routeData}}"
        tail="{{subroute}}"></app-route>

    <app-drawer-layout fullbleed>
      <!-- Drawer content -->
      <app-drawer id="drawer">
        <app-toolbar>Menu</app-toolbar>
        <iron-selector selected="[[page]]" attr-for-selected="name" class="drawer-list" role="navigation">
          <a name="view1" href="/view1">View One</a>
          <a name="view2" href="/view2">View Two</a>
          <a name="view3" href="/view3">View Three</a>
          <a name="el1" href="/el1">Element 1</a>
        </iron-selector>
      </app-drawer>

      <!-- Main content -->
      <app-header-layout has-scrolling-region>

        <app-header condenses reveals effects="waterfall">
          <app-toolbar>
            <paper-icon-button icon="my-icons:menu" drawer-toggle></paper-icon-button>
            <div main-title>My App</div> <paper-icon-button icon="polymer" on-click="openToast" ></paper-icon-button>
          </app-toolbar>
        </app-header>

        <iron-pages
            selected="[[page]]"
            attr-for-selected="name"
            fallback-selection="view404"
            role="main">
          <my-view1 name="view1"></my-view1>
          <my-view2 name="view2"></my-view2>
          <my-view3 name="view3"></my-view3>
          <my-el1 name="el1"></my-el1>
          <my-view404 name="view404"></my-view404>
        </iron-pages>
      </app-header-layout>
    </app-drawer-layout>
  </template>

  <script>
    Polymer({
      is: 'my-app',

      properties: {
        page: {
          type: String,
          reflectToAttribute: true,
          observer: '_pageChanged',
        },
      },

      observers: [
        '_routePageChanged(routeData.page)',
      ],

      _routePageChanged: function(page) {
        this.page = page || 'view1';

        if (!this.$.drawer.persistent) {
          this.$.drawer.close();
        }
      },

      _pageChanged: function(page) {
        // Load page import on demand. Show 404 page if fails
        var resolvedPageUrl = this.resolveUrl('my-' + page + '.html');
        this.importHref(resolvedPageUrl, null, this._showPage404, true);
      },

      _showPage404: function() {
        this.page = 'view404';
      },
      openToast: function() {
        console.info('here open the toast');
       //open toast
      }
    });
  </script>
</dom-module>

我在这个元素中的吐司<my-el1 name="el1"></my-el1>

MY-el1.html

<!-- POLYMER CORE -->
<link rel="import" href="../bower_components/polymer/polymer.html" />
<!-- PAPER ELEMENT -->
<link rel="import" href="../bower_components/paper-toast/paper-toast.html" />

<dom-module id="my-el1">
    <template>
        <style is="custom-style">

        </style>
        <paper-toast id="toastr" duration="0" text="Hello world!"></paper-toast>
    </template>
    <script>
        Polymer({
            is : 'my-el1'
        });
    </script>

</dom-module>

需要从<paper-icon-button icon="polymer" on-click="openToast" >显示此祝酒词，此按钮为my-app.html父元素

Answer 1

您必须检索对my-el1 dom节点及其内部纸张吐司的引用。

以下是一个例子：

openToast: function() {
  var el1 = this.$$('my-el1[name="el1"]');
  el1.$.toastr.open();
}

我确实发现这有问题，因为它破坏了封装的目的。

另一种方法是提供my-el1方法（我更喜欢通过属性，但这也可以），以显示纸张吐司。

在你的my-el1上：

Polymer({
  is : 'my-el1',
  openToast: function() {
    this.$.toastr.opened = true; // or this.$.toastr.open()
  }
});

在我的应用程序上：

Polymer({
  is: 'my-app',
  ...
  openToast: function() {
    var el1 = this.$$('my-el1[name="el1"]'); // or better yet, give an id to my-el1 so you can just refer it using this.$
    el1.openToast();
  }
});

聚合物如何从其他页面获取范围

1 个答案: