角度材质导航栏设置默认活动项

I am experimenting with an angular app using Angular Material and cannot seem to get my navbar to set the default item to be selected. I am using the Angular Material Navbar (Directive Info) for displaying my views and here is my template html for the navbar:

我正在尝试使用Angular Material的角度应用程序,似乎无法让我的导航栏设置要选择的默认项目。我使用Angular Material Navbar(指令信息)来显示我的视图,这是我的导航栏模板html:

<!-- Navbar -->
<md-content class="md-padding">
  <md-nav-bar md-selected-nav-item="currentNavItem" nav-bar-aria-label="navigation links">
    <md-nav-item md-nav-sref="layout.home" name="home">Home</md-nav-item>
    <md-nav-item md-nav-sref="layout.gallery" name="gallery">Gallery</md-nav-item>
    <md-nav-item md-nav-sref="#" name="page3">Page Three</md-nav-item>
  </md-nav-bar>
</md-content>

In my controller, I am setting up the currentNavItem to 'home' which should correspond to my md-nav-item named home which I felt should set it to be selected based on md-selected-nav-item="currentNavItem"

在我的控制器中,我将currentNavItem设置为'home',它应该对应于我的名为home的md-nav-item,我觉得应该根据md-selected-nav-item =“currentNavItem”将其设置为选中

export default class HeaderController {
  constructor($log) {
    Object.assign(this, {
      $log,
    });
    this.currentNavItem = 'home';
  }

  $onInit() {
    this.$log.debug('HeaderController.$onInit');
    this.$log.debug(this.currentNavItem);
  }
}

Any help would be appreciated as to why this doesn't make my list item selected by default when I load the app.

任何帮助将不胜感激为什么这不会使我在加载应用程序时默认选中我的列表项。

Edit

The issue in my case was that my controller was not being used in the navbar selection `md-selected-nav-item="$ctrl.currentNavItem"'. Adding values for each md-nav-item didn't seem to affect the active item setting.

在我的情况下的问题是我的控制器没有在导航栏选择`md-selected-nav-item =“$ ctrl.currentNavItem”'中使用。为每个md-nav-item添加值似乎不会影响活动项目设置。

1 个解决方案

#1

You need to set the value attribute of each md-nav-item - CodePen

您需要设置每个md-nav-item的值属性 - CodePen

Markup

<div ng-controller="AppCtrl as vm" ng-cloak="" ng-app="MyApp">
  <!-- Navbar -->
  <md-content class="md-padding">
    <md-nav-bar md-selected-nav-item="vm.currentNavItem" nav-bar-aria-label="navigation links">
      <md-nav-item md-nav-sref="layout.home" name="home" value="home">Home</md-nav-item>
      <md-nav-item md-nav-sref="layout.gallery" name="gallery" value="gallery">Gallery</md-nav-item>
      <md-nav-item md-nav-sref="#" name="page3" value ="page3">Page Three</md-nav-item>
    </md-nav-bar>
  </md-content>
</div>

angular.module('MyApp',['ngMaterial', 'ngMessages'])

.controller('AppCtrl', function() {
  this.currentNavItem = "home";
});

#1