我使用以下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>
我希望导航栏反映当前网址的路由,因此如果网址为http://somewhere/#/howitworks,则应突出显示第二个md-nav-item。到目前为止,我无法找到如何去做。
答案 0 :(得分: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 :(得分:0)
考虑使用 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>
现在,如果当前状态与ui-sref
中的状态匹配,则ui-sref-active中提供的类将激活。然后我们可以根据自己的内心设计风格。
md-nav-sref 转换为ui-sref,如docs
中所示答案 2 :(得分:0)
徘徊了一段时间后,我想到了这个解决方案。
希望它将来能对某人有所帮助。
##解决方案:捕获过渡事件
环境:
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;
});
}