javascript - Emberjs - 如何从组件方法中获取当前路由器路径

Question

所以，这基本上就是我想要的。但我需要获取可以在 ember 检查器中看到的当前路径，但如何在组件中获取它？或者有更好的方法来做到这一点吗？ 也许是一项服务？

import Ember from 'ember';
var inject = Ember.inject;
// maybe rewrite nav link one of these options?
// http://discuss.emberjs.com/t/best-practice-for-a-dynamic-menu-bar/9094
export default Ember.Component.extend({
    currentUser: inject.service('current-user'),
    actions: {
        logout: function () {
            console.log('header logout');
            this.get('currentUser').logout();
        }
    },
    didInsertElement: function() {
        // get current router path to implement if statements on header navigation
        if(path==='search-results'){
          jQuery('.showSearchButton').show();
        } else {
          jQuery('.showSearchButton').hide();  
        }
    }
});

<div id="header" class="header navbar navbar-default navbar-fixed-top" data-state-change="disabled">
    <!-- begin container -->
    <div class="container-fluid">
        <!-- begin navbar-header -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#header-navbar">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
                <button type="button" class="showSearchButton navbar-search collapsed" onclick="jQuery('.collapse.navbar-collapse.in').collapse('hide');" data-toggle="collapse" data-target="#search-navbar">
                    <i class="fa fa-search"></i>
                </button>
                <img src="assets/images/logo.png" alt="Logo">
            {{/link-to}}
        </div>
        <!-- end navbar-header -->
        <!-- begin navbar-collapse -->
        <div class="collapse navbar-collapse navbar-right" id="header-navbar">
            <ul class="nav navbar-nav">
                {{#if currentUser.logged}}
                    {{#if currentUser.hasDashboardPermissions}}
                        {{#nav-link-to 'dashboard.list' data-toggle='collapse' data-target='#header-navbar'}}Admin{{/nav-link-to}}
                    {{/if}}
                    {{#nav-link-to 'user.profile' data-toggle='collapse' data-target='#header-navbar'}}Account{{/nav-link-to}}
                    <li><a href="#" {{action 'logout' on="click"}}>Log Out</a></li>
                {{else}}
                    {{#nav-link-to 'auth.register' class='reg' data-toggle='collapse' data-target='#header-navbar'}}Register{{/nav-link-to}}
                    {{#nav-link-to 'auth.login' data-toggle='collapse' data-target='#header-navbar'}}Login{{/nav-link-to}}
                {{/if}}
            </ul>
            <ul class="nav navbar-nav visible-xs">
                <li role="separator" class="divider"></li>
                {{#nav-link-to 'about' data-toggle='collapse' data-target='#header-navbar'}}About{{/nav-link-to}}
                {{#nav-link-to 'how-it-works' data-toggle='collapse' data-target='#header-navbar'}}How it works{{/nav-link-to}}
                {{#nav-link-to 'terms-of-service' data-toggle='collapse' data-target='#header-navbar'}}Terms of Service{{/nav-link-to}}
                {{#nav-link-to 'support' data-toggle='collapse' data-target='#header-navbar'}}Support{{/nav-link-to}}
                {{#nav-link-to 'contact-us' data-toggle='collapse' data-target='#header-navbar'}}Contact Us{{/nav-link-to}}
            </ul>
        </div>
        <!-- end navbar-collapse -->
        <div class="collapse navbar-collapse" id="search-navbar">
            {{find-it header=true withSearch=withSearch class='inhead' inHeader=true}}
        </div>
    </div>
    <!-- end container -->
</div>

Answer 1

< Ember 2.3

this.get('container').lookup('controller:application').currentPath;

Ember 2.3 或更高版本

import Ember from 'ember';
const { getOwner } = Ember;
export default Ember.Component.Extend({
 ...
  currentPath: Ember.computed(function() {
    return getOwner(this).lookup('controller:application').currentPath;
  }),
 ...
});