Question

我试图隐藏网站标题上的后退按钮，将我带到仪表板。我正在使用类似这样的 pod 结构：

豆荚
- 组件
  - 站点标题
    - 模板.hbs
    - component.js
- 主要
  - 仪表板

在 component.js 中我使用了计算来获取当前路由

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

export default Component.extend({
router: service (),
 dashboard:computed('currentRouteName',function(){
    if(this.get('currentRouteName') === 'main.dashboard.index'){
      return true;
    }
    return false;
})
})

在 template.hbs 中，我使用以下代码检查链接。

{{#unless dashboard}}
  {{#link-to "main.dashboard" class="back-btn"}}{{t "goBackToDashboard"}}{{/link-to}}
{{/unless}}

通过调整 if/else 条件仍然是一样的，我要么在所有页面上都获得按钮，要么在没有。任何帮助将不胜感激。

app/route.js:

import EmberRouter from '@ember/routing/router';
import config from './config/environment';
import { inject } from '@ember/service';
import $ from 'jquery';
const Router = EmberRouter.extend({
  location: config.locationType,
  rootURL: config.rootURL,
  ajax: inject('ajax'),
});

Router.map(function () {
  this.route('login', { path: 'login' });
  this.route('main', { path: '/' }, function () {
    this.route('dashboard', { path: '' }, function () {});
    this.route("review", { path: "/review/:docId" }, function() { // eslint-disable-line
      this.route("edit", { path: "/edit/:bitId" }); // eslint-disable-line
      this.route('window_edit');
    });
}

Answer 1

您提到计算属性在 component.js 中，并且您正在执行 this.get('currentRouteName')，但该属性在组件中不存在。

我相信您需要在组件中使用 router service。

我假设您使用的是 pre-Octane 语法，所以它应该是这样的：

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

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

   dashboard: computed('router.currentRouteName',function() {
    if (this.get('router.currentRouteName') === 'main.dashboard.index') {
      return true;
    }

    return false;
  })
});

我不记得 RouterService 最初是哪个版本，但我希望这会有所帮助！

需要根据页面显示/隐藏按钮

1 个答案: