Question

我正在尝试在AngularJS / Angular混合应用程序中进行Angular路由。我创建了app-routing.module.ts文件：

import { ModuleWithProviders } from "@angular/core";
import { Routes, RouterModule, ExtraOptions } from '@angular/router';
import {SignInComponent} from "./modules/login/components/sign-in/sign-in.component";
import {ActivationComponent} from "./modules/login/components/activation/activation.component";

const routes: Routes = [
  {
    path: 'sign-in',
    component: SignInComponent
  },
  {
    path: 'activation',
    component: ActivationComponent
  },
  {
    path: '',
    pathMatch: 'full',
    redirectTo: '/activation'
  },
  {
    path: '**',
    pathMatch: 'full',
    redirectTo: '/activation'
  }
];

export const routingModule: ModuleWithProviders = RouterModule.forRoot(routes);

在app.module.ts中，我将routingModule添加到“导入”数组中，而在app.component.html中，我添加了：

<button (click)="goto('sign-in')">go to home</button>
<button (click)="goto('activation')">go to product</button>

<router-outlet></router-outlet>

当通过index.html进行洞察时，我仅使用Angular即可正常运行

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Angular</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>

<body>
<app-root></app-root>
</body>

</html>

但是当我添加AngularJS代码时，只需添加

this.upgrade.bootstrap(document.body, ['app']);

我当前的Angular路由改为重新加载“ router-outlet”标签的内容，从而完全重新加载页面。如果我删除

this.upgrade.bootstrap(document.body, ['app']);

它工作正常。是否有人遇到过类似的问题，也许有人可以提出一些方案，以使Angular路由正常工作，以了解AngularJS / Angular混合应用程序吗？谢谢

Answer 1

您似乎未正确配置AngularJS和Angular Router，请验证以下步骤-

默认路由（否则）应从AngularJS路由中删除。
将“ UrlHandlingStrategy”接口作为Angular路由器配置设置的一部分来处理特定URL的路由。这样可以避免Angular路由器与AngularJS路由器发生冲突-

导出类Ng1Ng2UrlHandlingStrategy实现了UrlHandlingStrategy {

shouldProcessUrl（url：UrlTree）：布尔值{ 返回url.toString（）。startsWith（'/ ng /'）; }

提取（网址：UrlTree）：UrlTree {return url; } merge（newUrlPart：UrlTree，rawUrl：UrlTree）：UrlTree {return newUrlPart; } }
将以上类（Ng1Ng2UrlHandlingStrategy）添加为URL处理策略的根模块中的提供程序-

提供者：[ {提供：UrlHandlingStrategy，useClass：Ng1Ng2UrlHandlingStrategy} ]
在应用程序组件html中添加AngularJS和Angular出口/指令

   <router-outlet></router-outlet>
    <div class="ng-view"></div>

基于哈希的路由将可用，但需要setUpLocationSync（upgrade）来支持混合应用程序中基于html 5的路由。请像下面一样更新main.ts文件-

upgrade.bootstrap（document.body，['app']）; setUpLocationSync（upgrade）;

在AngularJS / Angular混合应用中使用Angular路由重新加载所有页面

1 个答案: