Угловая md-панель навигации для отражения текущего маршрута

#angularjs

Вопрос:

Я использую следующую md-nav-bar:

 <md-nav-bar md-selected-nav-item="currentNavItem" aria-label="nav">
    <md-nav-item md-nav-href="#/overview" name="overview">Übersicht</md-nav-item>
    <md-nav-item md-nav-href="#/howitworks" name="howitworks">So funktioniert's</md-nav-item>
    <md-nav-item md-nav-href="#/startnow" name="startnow">Jetzt loslegen</md-nav-item>
</md-nav-bar>

Я бы хотел, чтобы панель навигации отражала маршрут текущего URL-адреса, поэтому, если URL-адрес http://somewhere/#/howitworks второй элемент md-nav должен быть выделен. До сих пор я не смог выяснить, как это сделать.

1. Простой способ — добавить ng-class=»{YOUR_CLASS: $location.path() === «YOUR_PATH»}» к каждому элементу

2. $location.path() похоже, не работает. Поскольку ваше предложение не сработало, я попытался вывести путь с помощью {{$location.path()}} , но он был пустым / неопределенным.

3. вводится ли $location в ваш контроллер?

4. Да, это так: function AppCtrl($scope, $location) {..}

Ответ №1:

(Я не могу опубликовать комментарий, поэтому я должен опубликовать это в качестве ответа)

$location.path() не работает для вас, потому что меняется не путь, а хэш (часть после #). Вместо этого вы должны использовать $location.hash() .

 ng-class="{YOUR_CLASS: $location.hash() === 'YOUR_PATH'}"

Если вы предпочитаете использовать md-selected-nav-item , как я, вы можете добавить функцию в контроллер для извлечения имени вкладки из хэша:

 this.getTabName() {
    return $location.hash().replace(/(^#/|/$)/g, '');
}

Тогда вы можете использовать его в своем представлении таким образом:

 <md-nav-bar md-selected-nav-item="getTabName()" aria-label="nav">
    <md-nav-item md-nav-href="#/overview" name="overview">Übersicht</md-nav-item>
    <md-nav-item md-nav-href="#/howitworks" name="howitworks">So funktioniert's</md-nav-item>
    <md-nav-item md-nav-href="#/startnow" name="startnow">Jetzt loslegen</md-nav-item>
</md-nav-bar>

1. Спасибо. Это работает при вводе URL-адреса в браузере, но если я изменю маршрут динамически с помощью чего-то подобного $location.path('/signup'); , это не сработает, поскольку, вероятно, придется следить за изменениями маршрута.

Ответ №2:

Рассмотрите возможность использования ui-sref-active

Например, у нас есть состояния, называемые home, about и contact . Если мы хотим добавить активный класс к каждому, если состояние активно, мы просто делаем следующее:

 <ul>
    <li><a ui-sref="home" ui-sref-active="active">Home</a></li>
    <li><a ui-sref="about" ui-sref-active="active">About</a></li>
    <li><a ui-sref="contact" ui-sref-active="active">Contact</a></li>
</ul>

Теперь, если текущее состояние соответствует состоянию in ui-sref , класс, предоставленный в ui-sref-active, будет активирован. Тогда мы можем стилизовать это по своему усмотрению.

md-nav-sref переходит в ui-sref, как показано в документах

1. Спасибо! Однако, md-nav-sref похоже, это не работает для меня, ни с md-nav-sref="about" , ни с md-nav-sref="#/about" , поэтому я использую md-nav-href="#/about" вместо этого. Есть идеи, почему sref не работает?

Ответ №3:

После небольшого блуждания я придумал это решение.
Надеюсь, это может помочь кому-то в будущем.

## Решение: перехватить событие перехода
Окружающая среда:

 Angularjs: v1.7.6
Angular-ui-route: v1.0.20

В html:

 <div ng-cloak ng-controller="navCtrl as $ctrl">    
<md-nav-bar md-selected-nav-item="$ctrl.currentNavItem">
                <md-nav-item md-nav-sref="client.TopPage" name="client.TopPage”>TOP PAGE</md-nav-item>
                <md-nav-item md-nav-sref="client.SecondPage" name="client.SecondPage”>SECOND PAGE</md-nav-item>
            </md-nav-bar>
</div>

В controller.js:

 navController.$inject = ['$state', '$transitions']
   function navController($state,$transitions){
        var $ctrl = this;    

        // Catch change state event and update
        $transitions.onSuccess({}, function() {
            $ctrl.currentNavItem = $state.current.name;
        });
    }