Ember.js 将自定义变量添加到EmberRouter，然后在另一个文件中使用它

我最近尝试扩展EmberRouter以包含以下信息

router.js

import EmberRouter from '@ember/routing/router';

const Router = EmberRouter.extend({
  lastVisitedURL: null,

  init() {
    this._super(...arguments);
    this.on('routeWillChange', () => {
      this._super(...arguments);
      this.lastVisitedURL = this.currentURL;
    });
  }

  // Router.map code (not important)
})

我现在想从控制器文件中提取

lastVisitedURL

。然而，我不知道怎么做。我尝试过的一些方法包括直接导入路由器（即：

我不完全确定这种方法的问题是什么，但它似乎返回了某种其他对象或函数，这些对象或函数并不真正包含路由器的状态

因此，下一种方法，似乎更为人们所接受，是尝试使用RouterService对象，我认为它是为了向路由器提供API

import Router from '../router';

export default Controller.extend({
   router: service(),

   someFunction() {
     console.log(this.router.lastVisitedURL) // returns undefined
   }
});

但是，我在这个解决方案中遇到的问题是，即使routerService可以存储路由器的状态，它也不会存储我的特定新变量。所以我现在需要一种方法来将这个特定的数据图片添加到RouterService以及EmberRouter

import Router from '../router';

export default Controller.extend({
   router: service(),

   someFunction() {
     console.log(this.router.lastVisitedURL) // returns undefined
   }
});

---

我真的不知道该怎么做，也不知道是否有更好的方法来解决我试图解决的问题。任何想法都很感激

老实说，我对您的用例有点困惑。当前URL在上可用，默认情况下随Ember一起提供。您可以这样访问它：

从“@ember/Controller”导入控制器；
从'@ember/service'导入{injectasservice}；
导出默认控制器.extend({
路由器：服务（），
someFunction（）{
console.log（this.router.currentURL）；
}
});

看起来您正试图重新设计该功能

如果您想在实例上声明一个属性并在其他地方使用它，您需要在容器上查找路由器。它可以作为

router:main

提供。您不能直接导入它，因为它既不是服务也不是控制器。代码如下所示：

从“@ember/Controller”导入控制器；
从'@ember/application'导入{getOwner}；
导出默认控制器.extend({
someFunction（）{
let owner=getOwner（this）；
让router=owner.lookup（'router:main'）；
console.log（router.currentURL）；
}
});

我不推荐这种模式。我认为它没有得到官方的支持。据我所知，

router:main

是私有API。所以它可能会在一个小版本中被破坏

服务可以更好地解决这一问题：

//app/services/location-history.js
从“@ember/Service”导入服务；
从'@ember/service'导入{injectasservice}；
从'@ember/object'导入{action}；
导出默认服务.extend({
路由器：服务（），
updateRoute:操作（函数（）{
this.visitedURL=[…this.visitedRoutes，this.router.currentURL]；
}),
init（）{
this.router.on（'routedChange'，this.updateRoute'）；
this.set（'visitedURL'，[]）；
},
遗嘱销毁（）{
this.router.off（'routedChange'，this.updateRoute'）；
}
});

如果您觉得语法很难理解，我建议切换到本机ECMAScript类，这是自Ember Octance以来的默认语法：

//app/services/location-history.js
从“@ember/Service”导入服务；
从'@ember/service'导入{injectasservice}；
从'@ember/object'导入{action}；
导出默认类LocationHistoryService扩展服务{
@业务路由器；
visitedURL=[]；
@行动
updateRoute（）{
this.visitedURL=[…this.visitedRoutes，this.router.currentURL]；
}
构造函数（）{
this.router.on（'routedChange'，this.updateRoute'）；
},
遗嘱销毁（）{
this.router.off（'routedChange'，this.updateRoute'）；
}
});

router:service（）

->为此，您需要包含正确的导入语句，即从“@ember/service”导入{inject as service}。您还应该尝试使用routeDidChange钩子（），我需要对此进行测试，但乍一看这似乎是一个非常好的解决方案！至于用例，我有一个表单，营销人员希望在提交表单之前知道上次访问的页面。如果只使用

this.currentURL

，它会告诉我表单的页面，但不会告诉我最后一页。因此我必须在路由转换之前存储

this.currentURL

。这至少是我的理解