Angular 4.x项目中基于@uirouter/angular实现组件内状态跳转的方法

嘿，刚好我之前在Angular 4项目里用过@uirouter/angular做状态管理，给你分享几个实用的实现方法：

核心方案：使用StateService跳转 #

这是最直接常用的方式，步骤很清晰：

1. 导入并注入StateService
   先在组件文件顶部导入服务，然后在构造函数里注入它：

   import { Component, OnInit } from '@angular/core';
   import { StateService } from '@uirouter/angular';
   
   @Component({
     selector: 'app-your-component',
     templateUrl: './your-component.component.html'
   })
   export class YourComponent implements OnInit {
     constructor(private stateService: StateService) { }
   }
   

2. 调用go()方法完成重定向
   在你需要触发跳转的地方（比如按钮点击事件、组件初始化钩子）调用stateService.go()：

   // 示例：按钮点击触发跳转
   onRedirectButtonClick() {
     // 基础用法：直接跳转到目标状态名称
     this.stateService.go('yourTargetState');
   
     // 带参数的跳转：传递状态所需的参数
     // this.stateService.go('yourTargetState', { userId: 1001 });
   
     // 强制刷新状态：如果当前状态和目标状态相同，强制重新加载
     // this.stateService.go('yourTargetState', {}, { reload: true });
   }
   
   // 示例：组件初始化时自动跳转
   ngOnInit() {
     this.stateService.go('yourTargetState');
   }
   

备选方案：通过UIRouter服务跳转 #

如果你需要访问更多路由相关的底层功能，也可以直接注入UIRouter服务，再通过它的stateService属性操作：

import { Component } from '@angular/core';
import { UIRouter } from '@uirouter/angular';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent {
  constructor(private uiRouter: UIRouter) { }

  redirect() {
    this.uiRouter.stateService.go('yourTargetState');
  }
}

注意事项 #

• 确保你的目标状态已经在路由配置中正确定义，比如：

  // 路由配置示例
  export const appStates = [
    {
      name: 'yourTargetState',
      url: '/target-path',
      component: TargetComponent
    }
  ];
  

• 如果跳转后需要传递参数，记得在目标状态的配置里声明参数（比如params: { userId: {} }），这样才能正确接收。

内容的提问来源于stack exchange，提问作者kulls