错误aurelia-templating-router 1.0.1与交换顺序 [英] error aurelia-templating-router 1.0.1 with swap-order

问题描述

为1.0.1更新了aurelia-templating-router

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

when I use <router-view swap-order="with"></router/view> An error occurs

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

如果我删除swap-order ="with"，错误消失

If I remove swap-order="with" the error disappears

如果我使用1.0.0版，即使使用swap-order="with"，也可以正常使用. 有人经历过这个吗?

If I use version 1.0.0, even with swap-order="with", everything works. Someone went through this?

我无法在GistRun上播放，它遵循内容(打字稿):

I could not play on GistRun, it follows content (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

推荐答案

此问题似乎来自aurelia-templating-router中的错误.

This issue appears to be coming from a bug in the aurelia-templating-router.

在此报告了该问题: https://github.com/aurelia/router/issues/458 ，可能很快就会修复，但现在可以通过简单地在aurelia-templating-router中进行更改来修复.

The issue is reported here: https://github.com/aurelia/router/issues/458 and probably will be fixed soon, but for now it can be fixed by simply making the change in the aurelia-templating-router.

当前，在aurelia-templating-router的router-view.js中的swap函数中，previousView定义在工作函数定义中，如下所示:

Currently, in the swap function in router-view.js of the aurelia-templating-router, previousView is defined inside of the work function definition like this:

//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并未设置为Previous View的正确对象，并且在删除时未能如期找到.

As it stands, previousView is not being set with the correct object for the Previous View and is failing to be found as it should when it is being removed.

当我在交换功能的范围内更改了previousView的定义时，一切似乎都可以正常工作，并且通过了所有测试.

When I changed previousView to be defined in the scope of the swap function everything seemed to work as it should and it passes all tests.

看来，要做的只是移动先前的View定义.

It appears that all that needs to be done is simply to move the previousView definition.

//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

You can easily reproduce the error here: https://github.com/bbarne8/AureliaSwapOrderRepro

这篇关于错误aurelia-templating-router 1.0.1与交换顺序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！