如何在 Angular 混合应用程序中通过代码进行路由答案

【问题标题】：How to route via code in an Angular hybrid app如何在 Angular 混合应用程序中通过代码进行路由
【发布时间】：2021-02-01 07:12:17
【问题描述】：

我正在开发一个混合 Angular/AngularJS 应用程序。主要的 AppModule 是使用 AppRoutingModule 的 Angular 模块，它使用给定的状态。类似的东西：

应用模块：

imports: [AModule, BModule, AppRoutingModule, ...]

AppRoutingModule：

imports: [UIRouterUpgradeModule.forRoot(states: some_state)]

州：

export const some_state: [
  {
    name: 'a',
    url: '/a'
    views: {
            main: {component: AComponent}
    }
  },
  {
    name: 'b',
    url: '/b'
    views: {
            main: {component: BComponent}
    }
  }
]

我想做什么——假设我在一个 BComponent 中，我想导航到 AComponent。在纯角度组件中，我将使用 RouterModule 中的路由器（AppModule 中的 forRoot 和子模块中的 forChild）。类似 router.navigateToURL('...')

现在我正在使用 UIRouterUpgradeModule，但我找不到如何操作。任何帮助都会非常感谢！

【问题讨论】：

标签： angularjs angular angular-ui-router angular-router angular-hybrid

【解决方案1】：

在您的组件中，首先在构造函数中声明router，如下所示：

import { Component } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  // ...
})
export class AppComponent {

  constructor(private router: Router) {}

  // ...
}

然后创建一个在需要更改路线时使用的函数，您可以将此函数绑定到任何事件，例如单击按钮以查看所需的更改：

changeRoute() {
  this.router.navigateByUrl('/b');
}

【讨论】：

这行不通，因为我正在使用 UIRouterUpgradeModule 和适合混合解决方案的状态。常规路由器需要路由器数组形式的不同状态。

【解决方案2】：

所以对我有用的是：在构造函数中从 @uirouter/core 导入 StateService，如下所示：

constructor(private stateService: StateService)

在我的方法中做了以下事情：

stateService.go('URL_TO_GO_TO');

这对我有用，我被重定向了。

【讨论】：