将聚合物飞镖元素添加到 div答案

【问题标题】：Add polymer-dart element to div将聚合物飞镖元素添加到 div
【发布时间】：2015-03-23 00:41:17
【问题描述】：

我正在尝试构建一个可以切换其他组件的组件，就像页面一样，但 URL 没有变化。

我有一个包含内容 div 的聚合物元素：

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

<link rel="import" href="../../packages/paper_elements/paper_input.html">
<link rel="import" href="../../packages/paper_elements/paper_input.html">
<link rel="import" href="../../packages/paper_elements/paper_tabs.html">
<link rel="import" href="../../packages/paper_elements/paper_dialog.html">
<link rel="import" href="../../packages/paper_elements/paper_icon_button.html">
<link rel="import" href="../../packages/core_elements/core_toolbar.html">
<link rel="import" href="../../packages/core_elements/core_scaffold.html">
<link rel="import" href="../../packages/core_elements/core_header_panel.html">
<link rel="import" href="../../packages/core_elements/core_menu.html">
<link rel="import" href="../../packages/core_elements/core_item.html">
<link rel="import" href="../../packages/paper_elements/paper_input.html">
<link rel="import" href="../../packages/paper_elements/paper_button.html">

<polymer-element name="navigation-toolbar" class="dark-primary-color">
    <template>
        <style type="text/css">
            :host {
                display: block;
            }

        </style>

        <core-scaffold>

            <core-header-panel id="menu-panel" navigation flex>

                <core-toolbar id="navheader">
                    <span>Menu</span>
                </core-toolbar>
                <core-menu>
                    <core-item label="A" on-click="{{aClicked}}"></core-item>
                    <core-item label="B" on-click="{{bClicked}}"></core-item>
                    <core-item label="C" on-click="{{cClicked}}"></core-item>
                </core-menu>
            </core-header-panel>

            <span tool>{{title}}</span>
            <paper-tabs class="main-menu bottom fit" selected="0">
                <paper-tab on-click="{{aClicked}}">A</paper-tab>
                <paper-tab on-click="{{bClicked}}">B</paper-tab>
                <paper-tab on-click="{{cClicked}}">C</paper-tab>
            </paper-tabs>

            <div class="content" forceNarrow>
               <p>Lorem ipsum ...</p>
            </div>
        </core-scaffold>
    </template>
    <script type="application/dart" src="navigation-toolbar.dart"></script>
</polymer-element>

我有一个触发事件和接收事件的事件总线，它在整个应用程序中都被使用以允许我解耦组件。

part of util;

class EB {

  static EventBus _eventBus = new EventBus();

  static fire(event){
    _eventBus.fire(event);
  }

  static Stream on([Type eventType]) {
    return _eventBus.on(eventType);
  }

}

用于触发/监听页面事件的PageEvent只是一个PODO：

part of event;

class PageEvent {

  String page;
  String title;
  PolymerElement element;


  PageEvent.create(String page, String title, PolymerElement element){
    this.page = page;
    this.title = title;
    this.element = element;
  }


}

在事件库中，正在为 PageEvent 完成相关导入：

library event;

import 'package:polymer/polymer.dart';

part 'login-event.dart';
part 'logout-event.dart';
part 'page-event.dart';
...

然后在我的核心脚手架组件中使用此事件总线：

import 'package:polymer/polymer.dart';
import 'util/util.dart';
import 'event/event.dart';
import 'page/page.dart';
import 'dart:html';

@CustomTag('navigation-toolbar')
class NavigationToolbar extends PolymerElement {

  @observable String page = "home";
  @observable String title = "Home";

  NavigationToolbar.created() : super.created() {

    EB.on(PageEvent).listen((PageEvent e) {
      this.page = e.page;
      this.title = e.title;
      setPage(e.element);
    });

点击其中一个纸张标签时会触发一个事件：

 // part of navigation-toolbar
 aClicked(event, detail, target) {
    EB.fire(new PageEvent.create("a", "A", new APage()));
  }

setPage 是最终魔法应该发生的地方，但不是，div 和 e 都被打印出来，这告诉我它正在访问方法，并且 e 和 div 都不为空：

 // part of navigation-toolbar
 setPage(PolymerElement e) {

    DivElement div = shadowRoot.querySelector("core-scaffold").querySelector(".content");
    Node node = div.lastChild;
    while (node != null) {
      node.remove();
      node = div.lastChild;
    }

    print(div);
    print(e);

    div.children.add(e);

  }

打印出div，在控制台可以看到div这个词不为null，打印出e，可以看到a-page、b-page、c-page等，也不为null。

清除 div 的代码有效，它会删除所有内容。不起作用的部分是 div.children.add(e);

APage 如下所示：

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

<polymer-element name="home-page" class="dark-primary-color">
    <template>
        <div>
            A Page
        </div>
    </template>
    <script type="application/dart" src="a-page.dart"></script>
</polymer-element>

和a-page.dart：

part of page;

@CustomTag('a-page')
class APage extends PolymerElement {

  APage.created() : super.created();

  factory APage() => new Element.tag('a-page');

}

在 navigation-toolbar.html 中添加 a-page.html 的导入

<link rel="import" href="page/a-page.html">

给我以下异常：

'package:falm/page/a-page.dart': error: line 1 pos 6: url expected
part of page;
     ^: package:falm/page/a-page.dart

div.children.add(e); 不起作用，我在这里缺少什么？

【问题讨论】：

很难说，你的问题没有显示太多相关的代码。您在某处添加的 Polymer 元素（入口页面或添加它的 Polymer 元素）是否有导入？（如<link rel="import" href="packages/core_elements/core_icon.html">）
如果<div> 是该类的唯一元素，您可以将shadowRoot.querySelector("core-scaffold").querySelector(".content") 简化为shadowRoot.querySelector("core-scaffold > .content") 或只是shadowRoot.querySelector(".content")。否则我仍然看不出有什么问题。我通常使用div.append(e) 而不是div.children.add(e)（应该也可以，但无论如何你都可以尝试第一个）。 a-page、b-page、c-page 的导入在哪里？
shadowRoot.querySelector("core-scaffold.content") 和 shadowRoot.querySelector(".content") 都不起作用，我需要双查询选择器，否则 DivElement 为空。我猜 shadowRoot 从 dom 中隐藏了 div 元素。 a-page 的导入都是在 page.dart 中完成的，它是页面库，然后在 navigation-toolbar.dart 中我只导入 page.dart。看到我在 dart 中实例化组件时，我认为不需要在 navigation-toolbar.html 上导入 a-page.html，但如果这样做，我会得到问题中提到的异常，所以不这样做。
我解决了，一整天的谷歌搜索终于解决了 :-) 现在将发布答案，然后我们可以弄清楚它为什么有效以及为什么其他方式无效。
每个元素都需要一个 HTML 导入 <link rel ...>，无论它是如何实例化的。 shadowRoot.querySelector("core-scaffold.content") 当然可以工作，它会寻找 <core-scaffold class="content"> 元素，但 shadowRoot.querySelector("core-scaffold .content") 或 shadowRoot.querySelector("core-scaffold > .content") 或 shadowRoot.querySelector("div.content") 应该可以工作，因为它们都在同一个影子 DOM 中。

标签： html dart polymer dart-polymer

【解决方案1】：

经过一番折腾，我找到了一种可行的方法 - 似乎聚合物元素在包含在库中时效果不佳。

这就是 a-page.dart 的样子：

part of page;

@CustomTag('a-page')
class APage extends PolymerElement {

  APage.created() : super.created();

  factory APage() => new Element.tag('a-page');

}

还有 page.dart 库：

library page;

import 'package:polymer/polymer.dart';
import 'dart:html';

part 'a-page.dart';
part 'b-page.dart';
part 'c-page.dart';

删除页面库并将所有依赖项直接放入 a-page.dart 之后：

import 'package:polymer/polymer.dart';
import 'dart:html';

@CustomTag('a-page')
class APage extends PolymerElement {

  APage.created() : super.created();

  factory APage() => new Element.tag('a-page');

}

在我的 navigation-toolbar.dart 中，我需要单独导入每个页面，而不是导入 page/page.dart：

import 'page/a-page.dart';
import 'page/b-page.dart';
import 'page/c-page.dart';

...

  setPage(PolymerElement e) {

    DivElement div = shadowRoot.querySelector("core-scaffold .content")
    ..children.clear()
    ..append(e);

  }

在 navigation-toolbar.html 上，我还需要导入每个 html 组件才能使其正常工作：

<link rel="import" href="page/a-page.html">
<link rel="import" href="page/b-page.html">
<link rel="import" href="page/c-page.html">

甚至可以在库中包含聚合物元素吗？

【讨论】：