Emberjs transitionToRoute 到新标签页

Question

当用户在 EmberJS 应用程序中单击 link 时，我想让 Ctrl 和 Meta Key 成为可能。

是否可以在新标签页中打开 transitionToRoute？

Answer 1

问得好...如果您使用 {{link-to}} 那么它将在没有任何 "hacks"...

的情况下工作

但是如果您必须在点击操作中执行此操作，则不能使用 transitionToRoute。

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

那么你将不得不使用window.open(routeUrl).

然后您可以使用 router#generate 生成 routeUrl，请参阅 How to generate url for a route in Ember.js

PS：我还没有尝试过这些只是猜测，但它已经感觉很脏而且闻起来很臭。如果可能的话，我会推荐{{link-to}}。

PPS：我很想听听你是怎么解决的:)

Answer 2

如果使用 Ember 2.16 或更高版本，您可以使用 RouterService#urlFor https://emberjs.com/api/ember/3.0/classes/RouterService/methods/urlFor?anchor=urlFor 方法，其工作方式与 transitionTo/transitionToRoute 完全相同，但 returns a 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 class 语法

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>

Emberjs transitionToRoute 到新标签页

Emberjs transitionToRoute to new tab

javascript

browser-tab

ember.js