Polymer 聚合物路线观察者-多个实例导致逻辑问题

使用聚合物1*

我有一个元素

foobar

，它有两个实例

<foo>
  <apple-pie>
    <foo-bar></foo-bar>
  </apple-pie>
</foo>

<bar>
  <cherry-pie>
    <foo-bar></foo-bar>
  </cherry-pie>
</bar>

元素foo-bar具有路线更改的观察者：

  <app-location route="{{route}}"></app-location>

   observers: ['_routeChanged(route.path)'],

    _routeChanged: function(newValue) {
      if (this.route.path.indexOf('main') > 0 &&
        this.firstLoadComplete &&
        this.oldRoutePath !== this.route.path) {
        this.cancel();
      }
      this.oldRoutePath = this.route.path;
    },

观察者：[“路由更改（路由路径）”，
_routeChanged:函数（newValue）{
如果（this.route.path.indexOf（'main'）>0&&
这是第一次完成&&
this.oldRoutePath！==this.route.path）{
这个。取消（）；
}
this.oldRoutePath=this.route.path；
},

我遇到的问题是，

\u routeChanged

每次路由更改都会为每个实例触发两次。这意味着

This.cancel（）

将触发两次……每个元素触发一次，这对我来说是个问题

当路由更改时，我如何使

这个。取消
只为实际活动的元素触发

当路线更改时，我如何进行此操作。取消仅为
实际活动的元素

您如何准确地检查哪一个元素实际上是“活动的”

您可以使用host元素控件布尔标志来指定哪个元素处于活动状态，或者将其双向绑定到父元素，并在那里使用逻辑来说明它是否处于活动状态：

<foo active={{fooActive}}>
  <apple-pie>
    <foo-bar active={{fooActive}}></foo-bar>
  </apple-pie>
</foo>

<bar active={{barActive}}>
  <cherry-pie>
    <foo-bar active={{barActive}}></foo-bar>
  </cherry-pie>
</bar>



然后，将其添加到foo-bar元素：

  <app-location route="{{route}}"></app-location>

   observers: ['_routeChanged(route.path)'],

    _routeChanged: function(newValue) {
      if (this.route.path.indexOf('main') > 0 &&
        this.firstLoadComplete &&
        this.oldRoutePath !== this.route.path &&
        this.active) {
        this.cancel();
      }
      this.oldRoutePath = this.route.path;
    },


观察者：[“路由更改（路由路径）”，
_routeChanged:函数（newValue）{
如果（this.route.path.indexOf（'main'）>0&&
这是第一次完成&&
this.oldRoutePath！==this.route.path&&
这是（主动的）{
这个。取消（）；
}
this.oldRoutePath=this.route.path；
},