Question

我正在使用Polymer App Toolbox中的app-drawer-layout，而不是<div main-title>My App</div>中的固定标题，我想让它与iron-pages动态协同工作 - 导航

理想情况下，我想在iron-pages中加载的每个元素中指定标题，但在导航中定义它也是一种解决方案。但是，我有点陷入困境，因为我所做的尝试似乎都没有。

我的代码如下所示：

<app-header condenses fixed effects="waterfall">
  <app-toolbar>
    <paper-icon-button icon="mdi:menu" drawer-toggle></paper-icon-button>
    <div main-title>My App</div>
  </app-toolbar>
</app-header>

<iron-pages role="main" selected="[[page]]" attr-for-selected="name">
  <moso-profile name="profile"></moso-profile>
  <moso-resume name="resume"></moso-resume>
  <moso-portfolio name="portfolio"></moso-portfolio>
  <moso-contact name="contact"></moso-contact>
</iron-pages>

现在，我尝试使用<content select=".page-title"></content>（Polymer Docs），然后在每个加载的元素中都有<div class="page-title">New title</div>。没用。

我还尝试为title中的每个元素添加iron-pages属性（如此：<moso-profile title="Profile" name="profile"></moso-profile>），然后尝试以{/ 1}方式绑定它，也没有运气。

我做错了吗？或者它不再可能了吗？

Answer 1

为什么不是这样的？

<app-header condenses fixed effects="waterfall">
  <app-toolbar>
    <paper-icon-button icon="mdi:menu" drawer-toggle></paper-icon-button>
    <div main-title>{{page}}</div>
  </app-toolbar>
</app-header>

<iron-pages role="main" selected="[[page]]" attr-for-selected="name">
  <moso-profile name="profile"></moso-profile>
  <moso-resume name="resume"></moso-resume>
  <moso-portfolio name="portfolio"></moso-portfolio>
  <moso-contact name="contact"></moso-contact>
</iron-pages>

或者如果你想更多地控制标题，你可以使用计算函数：

<app-header condenses fixed effects="waterfall">
  <app-toolbar>
    <paper-icon-button icon="mdi:menu" drawer-toggle></paper-icon-button>
    <div main-title>{{_computeTitle(page)}}</div>
  </app-toolbar>
</app-header>

并在javascript中：

_computeTitle: function(page) {
    if (page == 'profile') {
        return 'My Profile';
    }
    ...
}

Polymer - 带有app-header的动态页面标题

1 个答案: