Emberjs transitionToRoute 到新選項卡

Question

當用戶單擊 EmberJS 應用程序內的鏈接時，我想讓 Ctrl 和 Meta Key 成為可能。

是否可以將transitionToRoute打開到新選項卡中？

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>

Answer 2

好問題......如果你使用 {{link-to}} 那么它就可以在沒有任何“黑客”的情況下工作......

但是，如果您必須在單擊操作中執行此操作，則不能使用 transitionToRoute。

您可能可以檢查 ctrl/meta 鍵是否已按下（請參閱JavaScript：檢查是否已按下 CTRL 按鈕）

然后你將不得不使用 window.open(routeUrl)。

然后，您可以使用 router#generate 生成 routeUrl，請參閱如何在 Ember.js 中為路由生成 url

PS：我還沒有嘗試過，只是猜測，但它已經感覺很臟而且聞起來很糟糕。 如果可能，我會推薦 {{link-to}}。

PPS：我很想聽聽你是如何解決它的:)