Angular Material 导航栏设置默认活动项

Question

我正在试验一个 angular 应用程序，使用 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) 来显示我的视图，这是我的导航栏模板 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>

在我的控制器中，我将 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);
  }
}

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

编辑

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

Answer 1

您需要设置每个 md-nav-item - CodePen

的 value 属性

标记

<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>

js

angular
    .module
    (
        'MyApp',
        ['ngMaterial', 'ngMessages']
    )
    .controller
    (
        'AppCtrl',
        function()
        {
            this.currentNavItem = "home";
        }
    );

Angular Material 导航栏设置默认活动项

Angular Material Nav Bar Set Default Active Item

navbar

angularjs

ecmascript-6

angular-material