Angular 1 和 Angular 2 混合应用程序路由问题（angular 组件未显示）

Question

我有一个 Angular 1 和 Angular 2 混合应用程序，它是使用以下指南 Upgrading from AngularJS and Migrating Angular 1 Application to Angular 2 设置的。我的根组件如下所示：

import { NgModule, Component } from '@angular/core';
import { RouterModule, UrlHandlingStrategy } from '@angular/router';
import { BrowserModule } from '@angular/platform-browser';
import { UpgradeModule } from '@angular/upgrade/static';
import { RouterUpgradeInitializer } from '@angular/router/upgrade';
import { MyModule } from './Mymodule/my-module';

export class Ng1Ng2UrlHandlingStrategy implements UrlHandlingStrategy {
    shouldProcessUrl(url: any) {
        return url.toString().startsWith("/Mymodule");
    }

    extract(url: any) {
        return url;
    }

    merge(url: any, whole: any) {
        return url;
    }
}

@Component({
    selector: 'root-component',
    template: `
    <router-outlet></router-outlet>
    <div class="ng-view"></div>
  `
})
export class RootComponent { }

@NgModule({
    imports: [
        BrowserModule,
        UpgradeModule,
        MyModule,

        RouterModule.forRoot([])
    ],
    providers: [
        { provide: UrlHandlingStrategy, useClass: Ng1Ng2UrlHandlingStrategy }
    ],
    bootstrap: [RootComponent],
    declarations: [RootComponent]
})
export class Ng2AppModule {
    constructor(public upgrade: UpgradeModule) { }
}

我的 "main.ts" 如下：

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { setUpLocationSync } from '@angular/router/upgrade';
import { Ng2AppModule } from "./Angular2/app.rootcomponent";

// This is the entry point for the AngularJS/Angular hybrid application.
// It bootstraps the Angular module 'Ng2AppModule', which in turn bootstraps
// the AngularJS module 'angular1App'.
platformBrowserDynamic().bootstrapModule(Ng2AppModule).then(ref => {
    const upgrade = (<any>ref.instance).upgrade;
    // bootstrap angular1
    upgrade.bootstrap(document.body, ['angular1App']);
    setUpLocationSync(upgrade);
});

模块'MyModule'如下：

import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { TestDataListComponent } from './testdata-list.component';

@NgModule({
    imports: [
        RouterModule.forChild([
            {
                path: 'Mymodule', children: [
                    { path: 'testdata', component: TestDataListComponent }
                ]
            }
        ])
    ],
    declarations: [TestDataListComponent ]
})
export class MyModule {

}

而'TestDataListComponent'组件很简单：

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

@Component({
    selector: 'test-data',
    templateUrl: 'App/Angular2/MyModule/testdata-list.component'.html'
})
export class TestDataListComponent{

}

我 link 访问 Angular 2 组件的方式是在主菜单 HTML 页面中。相关代码如下：

<li id="main-menu" class="menu-top-level" ng-mouseover="cur = 'mymodule'">        
    <a ng-reflect-router-link="/Mymodule/testdata" href="#/Mymodule/testdata">
        MyModule
        <span>
            <i class="fa fa-check-square fa-2x"></i>
        </span>
    </a>
</li>

我遇到的问题是，单击上面的 link 会将我带到空白视图，即未显示组件 TestDataListComponent。但是，如果我在主 Angular 2 模块中替换以下行，即 Ng2AppModule:

RouterModule.forRoot([])

与：

RouterModule.forRoot([], { useHash: true, initialNavigation: false })

component TestDataListComponent 显示正常，但是当我尝试通过单击 link 导航回 Angular 1 组件时，页面是空白的，我注意到 URL 在我的浏览器 window 中看起来像这样：

http://localhost:60813/#/

它看起来应该是这样的：

http://localhost:60813/#/myclients

如果我第二次点击 link，URL 是正确的并且 Angular 1 组件显示正常。

我的 Angular 1 模块 angular1App 的相关部分是：

angular.module("angular1App",
["ngRoute",
 "myInterceptorService",
 "ngStorage",
 "ngAnimate",
 "ui.bootstrap",
 "ngResource",
 "SignalR",
 "ui.select",
 "ngSanitize"])
.config([
    "$routeProvider", "$httpProvider", function($routeProvider, $httpProvider) {

        $httpProvider.interceptors.push("myInterceptorService");

        $routeProvider
            .when('/myclients',
            {
                title: "Client Data",
                controller: "clientDataCtrl",
                templateUrl: "/App/Common/Views/clientData.html"
            })

这里有什么问题？为什么现在显示我的 Angular 2 或 Angular 1 组件？

Answer 1

您的组件问题似乎出在这里：

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

@Component({
    selector: 'test-data',
    templateUrl: 'App/Angular2/MyModule/testdata-list.component'.html'
})
export class TestDataListComponent{

}

您需要添加正确的 templateUrl 字符串

Answer 2

brandonroberts 在 Angular github 上提供了解决方案。详情见本期https://github.com/angular/angular/issues/18832

解决方案摘录："The way setupLocationSync provides the URL to the router for navigating doesn't work correctly with hash-based routing. What I did was tweak the source from the setupLocationSync to pass the URL from the hash to navigate with. This way the Router will handle navigating both scenarios correctly."

有关详细信息，请参阅上面问题中的 Plunker。

Angular 1 和 Angular 2 混合应用程序路由问题（angular 组件未显示）

Angular 1 and Angular 2 Hybrid Application Routing Issue (angular component not displaying)

javascript

angularjs

angular2-routing

angular

angular-hybrid