Question

因此，我试图找出使用角度为1.5的组件的角度材料的最佳实践，并且正在努力设置md-nav-bar。

以下是使用我当前代码的代码集：http://codepen.io/anon/pen/QEQwaG?editors=1010

请注意，即使我在$ onInit生命周期钩子中初始化this.currentNavItem，也未选中“主页”选项卡。

我希望这可以工作，尽管可能有些人不熟悉组件范围如何工作导致这种行为。

在我的实际项目（ES6 / Babel）中，我通过向组件控制器注入$ scope并遵循类似的逻辑来实现这一点：

$onInit() {

    this.$scope.currentNavItem = '/home';

    this.$rootScope.$on('$locationChangeSuccess', (event, current) => {
        this.$scope.currentNavItem = this.$location.path();
    });
}

我觉得这不是让这项工作最好的方法。

Answer 1

这样做的方法是使用controllerAs - CodePen

JS

angular
  .module("MyApp", ["ngMaterial"])
  .component('test', {
    template: '<md-nav-bar md-selected-nav-item="vm.currentNavItem"><md-nav-item md-nav-sref="home" name="/home">Home</md-nav-item><md-nav-item md-nav-sref="about" name="/about">About</md-nav-item></md-nav-bar>',
    controller: function() {
      var vm = this;
      vm.$onInit = function() {
        vm.currentNavItem = "/home"
      }
    },
    controllerAs: "vm",
    bindToController: true
  });

John Papa controllerAs reference

使用1.5角分量的md-nav-bar

1 个答案: