Angular：从组件中读取状态

Question

从组件中读取状态的正确方法是什么？我有一个在我的应用程序中可见的导航组件，当您在与导航中的项目相对应的页面上时，我正在尝试将 active 类添加到 <li> 元素。

最好像这样将状态传递给它：

index.html

<nav state-name="$state.current.name"></nav>

nav.component.js

export default class Nav {
  template = `<ul>
                <li ng-class="{ 'active': $ctrl.currentState === 'home }"
                    ui-sref="home">Home</li>
                <li ng-class="{ 'active': $ctrl.currentState === 'about }"
                    ui-sref="about">About</li>`;
  bindings = {
    stateName: '<'
  };
  controller = NavController;
}  

class NavController {
  $onChanges = (changesObj) => {
    if (changesObj.stateName.currentValue !== changesObj.stateName.previousValue) {
      this.currentState = changesObj.stateName.currentValue;
    }
  } 
}    

现在这可行，我只是不确定我对通过绑定传递状态的感觉如何。我想我要问的是是否有更好的方法来做到这一点——也许是更优雅的解决方案？

感谢任何帮助。提前致谢！

Answer 1

由于您基本上是在监听 $state.current.name 的变化，因此您也可以直接监听状态变化事件。

我为面包屑导航做了类似的事情，但使用了 ui-router 的新转换钩子：http://angular-ui.github.io/ui-router/feature-1.0/。转换钩子的优点是，一旦发生转换，它们就无需观察变量或事件，因为它们被路由器调用。

或者你可以直接去掉中间人，直接在你的组件中使用 $state。

Answer 2

选项很少——

1. 如果该组件应该用于不同的动态导航解决方案 - 您的解决方案很好。
2. 您可以在应用程序中添加 1 个服务来负责状态管理 - 而不是直接使用 $state - 并添加一堆与之相关的逻辑。将其从导航控件中隐藏并没有太大优势，因此您只需将其注入控制器即可避免绑定。 UT 也很简单，因为您可以毫无问题地模拟此服务。