Angular:从组件中读取状态

Angular: Reading State from a Component

本文关键字：读取 状态 组件 Angular      更新时间：2023-09-26

从组件中读取状态的正确方法是什么?我有一个导航组件，在我的应用程序中是可见的，我试图添加类的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;
    }
  } 
}

现在工作了，我只是不确定我是如何通过绑定传递状态的。我想问的是，是否有更好的方法——也许是更优雅的解决方案?

任何帮助都是感激的。提前感谢!

当你基本上监听$state.current.name的变化时，你也可以直接监听状态变化事件。

我为breadcrumb导航做了类似的事情，但使用了ui-router: http://angular-ui.github.io/ui-router/feature-1.0/的新过渡钩子。转换钩子的优点是，当转换发生时，它们不需要监视路由器调用的变量或事件。

或者你可以直接跳过这个中间人，直接在组件中使用$state。

有几个选项-

  1. 如果这个组件应该用于不同的动态导航解决方案-你的解决方案是好的。
  2. 你可以在你的应用程序中添加一个服务来负责状态管理——而不是直接使用$state——并添加一堆与之相关的逻辑。对导航控件隐藏它并没有什么好处，所以你可以把它注入到控制器中，从而避免绑定。UT也很简单，因为你可以毫无问题地模拟这个服务。
相关文章：