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

选项很少 -

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

Angular：从组件中读取状态

2 个答案: