如何解决需要根据页面显示/隐藏按钮
我试图隐藏网站标题上的后退按钮,将我带到仪表板。我正在使用类似这样的 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');
});
}
解决方法
您提到计算属性在 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
最初是哪个版本,但我希望这会有所帮助!
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。