Ember.js transitionToRoute到新标签页

Question

我希望您点击EmberJS应用程序中的链接时，能够使用Ctrl和Meta键。是否可以将transitionToRoute在新标签页中打开？

- Charles

---

你可以尝试使用 window.open(newRoutePath);。 - Jeff

Answer 1

如果使用Ember 2.16或更高版本，您可以使用RouterService＃urlFor https://emberjs.com/api/ember/3.0/classes/RouterService/methods/urlFor?anchor=urlFor方法，它的工作方式与transitionTo/transitionToRoute完全相同，但返回一个URL而不是转换到它。

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

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

  actions: {
    openSomething(id) {
      let routerService = this.get('routerService');
      let url = routerService.urlFor('my-route', id);

      window.open(url);
    }
  }
});

对于Ember 2.16以下的用户，您可以使用一个polyfill：https://github.com/rwjblue/ember-router-service-polyfill

编辑于08/2020 类语法

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

export default class SomeController extends Controller {
  @service('router') routerService;

  @computed('model.id')
  get url() {
    let url = this.routerService.urlFor('my-route', this.model.id);

    return url;
  }
}

请注意，为了使应用更易访问，生成的url应该使用@tracked或@computed作为getter，并传递给<a href={{this.url}} target='_blank' rel='noopenner noreferrer'>open</a>。

- knownasilya

Answer 2

好问题...如果您使用{{link-to}}，则不需要任何“黑客”就可以正常工作...

但是，如果您必须在单击操作中执行此操作，则无法使用transitionToRoute。

您可以检查ctrl/meta键是否按下（请参见JavaScript：Check if CTRL button was pressed）

然后，您将不得不使用window.open(routeUrl)。

然后，您可以使用router#generate生成routeUrl，请参见如何在Ember.js中生成路由的url

PS：我还没有尝试过任何东西，只是猜测，但它已经感觉到肮脏并发出异味。 如果可能的话，我建议使用{{link-to}}。

PPS：我很想听听您如何解决这个问题 :)

- Emad

---

最后我使用了 RouterService#urlFor。我不能使用 {{link-to}}，因为链接在 EmberJS 之外，这部分目前还没有移植到 EmberJS。是的，这很不规范 :p - Charles