Question

我有一个＆＃34;复制链接＆＃34;在我的模板中输入应该向用户显示当前加载的URL（带有查询参数）以供他们复制和放大糊。

带有URL的输入是属于具有多个子节点的父路由的模板的一部分：

- Parent route  <-- Copy URL link in this template
  - Child route
  - Child route
  - Child route

这意味着在导航子路由时，URL应该在父路由中更新。事实证明这很难实现。

AFAIK没有用于更改网址的原生事件，因此我无法创建组件并只是跟踪任何浏览器事件。我在hashchange上尝试window，但这显然只跟踪#而不是网址或查询参数。
当页面加载时我无法使用window.location.href，因为任何后续转换到子路由都不会反映在输入中。
我无法在父路由的window.location.href操作（或任何其他路由挂钩）中获取带有didTransition的网址，因为此时网址尚未更新（即我得到之前的 URL）

编辑：

目前，这是唯一可行的方法：

// In the parent route:
actions: {
  didTransition() {
    this._super(...arguments);
    Ember.run.schedule('afterRender', () => {
      this.set('controller.currentURL', window.location.href);
    });      
  }
}

但似乎非常hacky

Answer 1

我认为您可以从路由器位置的路径属性中受益。我的意思是，您可以使用router将controller注入到您喜欢的instance-initializer中，并定义计算属性以观察当前路径。请查看以下twiddle。我编写了一个名为instance-initializers\routerInjector的实例初始化程序，将应用程序的路由器注入每个控制器。我在location控制器中定义了一个名为application.js的计算属性，如下所示：

location: Ember.computed.oneWay('router.location.path')

我将此添加到application.hbs。如果我得到了你想要的东西;这就是你想要的。

Answer 2

从Ember 2.15开始，您可以使用route service。

示例：

import { inject as service } from '@ember/service';
import { alias } from '@ember/object/computed';

export default Component.extend({
  router: service(),
  currentRoute: alias('router.currentURL')
});

跟踪模板中的当前URL

2 个答案: