错误aurelia-模板-路由器1.0.1与交换顺序

Question

更新的aurelia-模板- 1.0.1路由器

当我使用<router-view swap-order="with"></router/view>时会发生错误

[app-router] TypeError: Cannot read property 'animatableElement' of undefined

如果删除交换-order=“with”，则错误将消失。

如果我使用1.0.0版本，即使使用swap-order="with"，一切都正常。有人经历过这个？

我无法在GistRun上播放，它的内容如下(打字本)：

au new myapp

app.ts

export class App {
  router:any;
  configureRouter(config, router) {
    this.router = router;
    config.title = 'Aurelia';
    config.map([
      { route: ['', 'home'],  name: 'home', moduleId: 'home'}
    ]);
  }
}

app.html

<template><router-view swap-order="with"></router-view></template>

home.html

<template><h1>HOME</h1></template>

home.ts

export class Home{}

这就足够看到错误了。

au run --watch

Answer 1

此问题似乎来自于aurelia-模板路由器中的一个bug。

这个问题是在这里报道的：https://github.com/aurelia/router/issues/458，可能很快就会修复，但是现在它可以通过简单地修改aurelia-模板路由器来解决。

目前，在aurelia-模板-路由器的路由器-view.js中的交换函数中，工作函数定义中定义了previousView，如下所示：

//router-view.js

  swap(viewPortInstruction) {
    let layoutInstruction = viewPortInstruction.layoutInstruction;

    let work = () => {
//////////////////////////////////////////////////////////////////////////
     let previousView = this.view; ////This is not being correctly set 
//////////////////////////////////////////////////////////////////////////
      let swapStrategy;
      let viewSlot = this.viewSlot;

      swapStrategy = this.swapOrder in swapStrategies
                  ? swapStrategies[this.swapOrder]
                  : swapStrategies.after;

      swapStrategy(viewSlot, previousView, () => {
        return Promise.resolve().then(() => {
          return viewSlot.add(this.view);
        }).then(() => {
          this._notify();
        });
      });
    };
...    

就目前情况而言，previousView没有被设置为前一个视图的正确对象，并且在被移除时未能按其应有的方式被找到。

当我将previousView更改为在交换函数的作用域中定义时，一切似乎都正常工作，并且通过了所有测试。

看起来，所需要做的就是移动previousView定义。

//router-view.js

  swap(viewPortInstruction) {
    let layoutInstruction = viewPortInstruction.layoutInstruction;
//////////////////////////////////////////////////////////////////////////
    let previousView = this.view;  ////This is now being correctly set 
//////////////////////////////////////////////////////////////////////////

    let work = () => {

      let swapStrategy;
      let viewSlot = this.viewSlot;

      swapStrategy = this.swapOrder in swapStrategies
                  ? swapStrategies[this.swapOrder]
                  : swapStrategies.after;

      swapStrategy(viewSlot, previousView, () => {
        return Promise.resolve().then(() => {
          return viewSlot.add(this.view);
        }).then(() => {
          this._notify();
        });
      });
    };
...    

您可以很容易地在这里再现错误：https://github.com/bbarne8/AureliaSwapOrderRepro