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

Question

我最近尝试扩展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。但是，我不确定该怎么做。我尝试过的一些操作包括直接导入EmberRouter（即E.E。）：

import Router from '../router';

export default Controller.extend({
   someFunction() {
     console.log(Router.lastVisitedURL); // returns undefined
   }
});

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

因此，似乎更被接受的下一种方法是尝试使用RouterService对象，我认为该对象旨在为EmberRouter提供API。

import Router from '../router';

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

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

尽管我在此解决方案中遇到的问题是，即使routerService可以存储EmberRouter的状态，但它也不存储我的特定新变量。因此，我现在需要一种方法来将此特定的数据添加到RouterService以及EmberRouter。

我不确定如何执行此操作，或者是否有更好的方法来解决我要解决的问题。任何想法表示赞赏！

Answer 1

老实说，我对您的用例有些困惑。当前URL在RouterService上可用，默认情况下Ember随附。您可以像这样访问它：

RouterService

似乎您正在尝试重新开发该功能。

如果要在

import Controller from '@ember/controller';
import { inject as service } from '@ember/service';

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

   someFunction() {
     console.log(this.router.currentURL);
   }
});

实例上声明属性，然后在其他地方使用它，则需要在容器上查找路由器。可作为EmberRouter使用。您不能直接导入它，因为它既不是服务也不是控制器。代码如下：

EmberRouter

我不推荐这种模式。我认为它没有得到官方支持。据我所知router:main是私有API。因此它可能在次要版本中被破坏。

可以通过服务更好地解决此问题：

import Controller from '@ember/controller';
import { getOwner } from '@ember/application';

export default Controller.extend({
   someFunction() {
     let owner = getOwner(this);
     let router = owner.lookup('router:main');
     console.log(router.currentURL);
   }
});

如果发现难以理解的语法，建议您切换到本机ECMAScript类，这是Ember Octance之后的默认语法：

router:main