Question

我正在尝试构建一个可以切换其他组件的组件，几乎就像页面一样，但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';
...

然后在我的core-scaffold组件中使用此事件总线：

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，这意味着它不是空的，打印出来的e，我可以看到a-page，b-page，c-page等，＆＃39 ; s也不为空。

清除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);不起作用，我在这里缺少什么？

Answer 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">

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

将聚合物-dart元素添加到div中

1 个答案: