Question

更新了aurelia-templating-router for 1.0.1

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

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

如果我删除swap-order =＆＃34;使用＆＃34;错误消失

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

我无法在GistRun上播放，它跟随内容（Typescript）：

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-templating-router中的错误。

这里报告了这个问题：https://github.com/aurelia/router/issues/458并且很快就会修复，但是现在可以通过简单地在aurelia-templating-router中进行更改来解决。

目前，在aurelia-templating-router的router-view.js中的swap函数中，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更改为在swap函数的范围内定义时，一切似乎都应该正常工作，并且它会通过所有测试。

似乎所有需要做的只是移动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

错误aurelia-templating-router 1.0.1 with swap-order

1 个答案: