Question

我有这个核心抽屉面板，并希望#navicon切换抽屉。就像在例子中一样。

在HTML和dart文件中的以下代码中单击鼠标右键，我在面板上看到NoSuchMethod错误

  void toggleDrawer() {
    querySelector('#drawerPanel')..togglePanel();
  }

现在我看到点击是somewhat deprecated，我完全糊涂了。

查询元素和捕获此类事件的最佳实践方法是什么？我也看到了这个question，但它仍然不适合我。

Answer 1

先看看Günters的回答。除此之外，我发现了如article on dartlang.org建议的那样。

HTML

<core-drawer-panel id="drawerPanel">

        <core-header-panel drawer>
            <core-toolbar id="navheader'">
                <span>Menu</span>
            </core-toolbar>
            <core-menu>
                <core-item label="One"></core-item>
                <core-item label="Two"></core-item>
            </core-menu>
        </core-header-panel>

        <core-header-panel main>
            <core-toolbar id="mainheader">
                <paper-icon-button id="navicon" icon="menu"></paper-icon-button>
                <span flex>Title</span>
            </core-toolbar>
            <div class="content">
                If drawer is hidden, press button to display drawer.
            </div>
        </core-header-panel>

    </core-drawer-panel>

飞镖文件

  void attached() {
    super.attached();
    shadowRoot.querySelector('#navicon').on['tap'].listen(
        (event) => toggleDrawer()
    );
  }

  void toggleDrawer() {
    shadowRoot.querySelector('#drawerPanel')..togglePanel();
  }

Answer 2

on-tap代替on-click在移动平台上提供更好的支持。 on-tap＆＃39;包括＆＃39; on-click。另请参阅Touch & gestures和When to use on-click or on-tap w/ Polymer?

您可能需要shadowRoot.querySelector(...。

用聚合物听取核心抽屉面板的点击事件。“正确”的方式？

2 个答案: