AngularJS与Angular13混合项目中如何访问$state、$stateProvider？

一、访问$state（实现路由跳转） #

基于混合架构的特性，可通过以下步骤在Angular 13中调用AngularJS的$state：

1. 在Angular模块中注册$state提供者
   在你的Angular 13模块（如AppModule）中，借助UpgradeModule和getInjectableName()将AngularJS的$state注册为Angular可用的提供者：

   import { NgModule } from '@angular/core';
   import { BrowserModule } from '@angular/platform-browser';
   import { UpgradeModule, getInjectableName } from '@angular/upgrade/static';
   
   @NgModule({
     imports: [BrowserModule, UpgradeModule],
     providers: [
       {
         provide: '$state',
         useFactory: (upgrade: UpgradeModule) => upgrade.injector.get(getInjectableName('$state')),
         deps: [UpgradeModule]
       }
     ]
   })
   export class AppModule {
     constructor(private upgrade: UpgradeModule) {
       this.upgrade.bootstrap(document.body, ['你的AngularJS应用模块名']);
     }
   }
   

2. 在Angular组件/服务中注入并使用$state
   在需要跳转的组件或服务中直接注入$state，调用$state.go()完成路由跳转：

   import { Component } from '@angular/core';
   
   // 避免TypeScript类型报错
   declare var angular: any;
   
   @Component({
     selector: 'app-employee',
     template: '<button (click)="jumpToDetails()">查看员工详情</button>'
   })
   export class EmployeeComponent {
     constructor(private $state: any) {}
   
     jumpToDetails() {
       this.$state.go('com.abc.employee.details');
     }
   }
   

二、访问$stateProvider（配置路由） #

$stateProvider是AngularJS的路由配置工具，默认仅能在AngularJS配置阶段使用，若需在Angular中访问，需先将其包装为可注入服务：

1. 在AngularJS模块中包装$stateProvider为服务
   在你的AngularJS模块中，将$stateProvider封装成可注入的工厂服务：

   angular.module('你的AngularJS应用模块名', ['ui.router'])
     .factory('stateProviderWrapper', ['$stateProvider', function($stateProvider) {
       return $stateProvider;
     }]);
   

2. 在Angular模块中注册该包装服务
   同样通过getInjectableName()获取服务的注入名称，在Angular模块中注册提供者：

   @NgModule({
     providers: [
       {
         provide: 'stateProviderWrapper',
         useFactory: (upgrade: UpgradeModule) => upgrade.injector.get(getInjectableName('stateProviderWrapper')),
         deps: [UpgradeModule]
       }
     ]
   })
   export class AppModule {}
   

3. 在Angular中使用$stateProvider
   在需要配置路由的服务或组件中注入包装后的服务，调用$stateProvider的方法：

   import { Injectable } from '@angular/core';
   
   @Injectable()
   export class RouteConfigService {
     constructor(private stateProviderWrapper: any) {
       // 示例：新增路由状态
       this.stateProviderWrapper.state('com.abc.department.details', {
         url: '/department/:id',
         templateUrl: 'department-details.html'
       });
     }
   }
   

注意：混合架构中建议保持路由配置的单一来源，优先在AngularJS侧维护路由规则，避免跨框架配置引发冲突。

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