Question

我正在使用Angular Material尝试使用角度应用，但似乎无法让我的导航栏设置要选择的默认项目。我使用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设置为＆＃39; home＆＃39;这应该对应于我的名为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 =＆＃34; $ ctrl.currentNavItem＆＃34;＆＃39;。为每个md-nav-item添加值似乎不会影响活动项目设置。

Answer 1

您需要设置每个value的{{1}}属性 - CodePen

标记

md-nav-item

JS

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

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

1 个答案: