Question

我正在为我的控制器试验ES6课程。

以前如果我使用ui-router监听rootScope事件，我可以这样做：

$rootScope.$on('stateChangeStart', function (event, toState, toParams, fromState, fromParams) { 
    console.log(toState)
}

和toState很容易被访问。

我的ES6控制器目前看起来像这样：

＆＃13;

class NavbarController {
  constructor ($rootScope) {
    this.name = 'navbar'
    this.$rootScope = $rootScope

    this.$rootScope.$on('stateChangeStart', this.activeNav())
  }

  activeNav () {
    console.log('This is called')
    return (event, toState, toParams) => {
      console.log('This is never called')
    }
  }
}

NavbarController.$inject = ['$rootScope']
export default NavbarController

＆＃13;

从我读过的帖子中我认为我在正确的轨道上但是我没有调用我正在返回的功能，我无法弄清楚如何访问事件参数。

那么在ES6角度控制器中处理事件的正确方法是什么？

Answer 1

activeNav () {
  console.log('This is called')
  return (event, toState, toParams) => {
    console.log('This is never called')
  }
}

您在这里使用的语法不正确。箭头功能需要有＆＃34; =＆gt;＆＃34;因此他们的名字。您的代码中还有一些语法错误。考虑使用某种IDE或其他自动语法检查方式。

事件的名称也是$ stateChangeStart not stateChangeStart。

Answer 2

西拉科斯向我指出了我的问题，愚蠢地使用了错误的事件。工作片段如下，以防其他人。

＆＃13;

class NavbarController {
  constructor ($rootScope) {
    this.$rootScope = $rootScope
    this.$rootScope.$on('$stateChangeStart', this.activeNav())
  }

  activeNav () {
    return (event, toState, toParams) => {
      console.log(toState.name, toParams)
    }
  }
}

NavbarController.$inject = ['$rootScope']
export default NavbarController

＆＃13;

处理ES6 Angular控制器中的事件

2 个答案: