6

我有一个 Angular 1 和 Angular 2 混合应用程序，它使用以下指南进行设置，从 AngularJS 升级和将Angular 1 应用程序迁移到 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{

}

我链接到 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>

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

RouterModule.forRoot([])

和：

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

组件TestDataListComponent显示正常，但是当我尝试通过单击链接导航回 Angular 1 组件时，页面是空白的，我注意到浏览器窗口中的 URL 如下所示：

http://localhost:60813/#/

虽然它应该看起来像这样：

http://localhost:60813/#/myclients

如果我再次单击该链接，则 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 组件现在出现了？

4

2 回答 2

1

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

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

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

}

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

于 2018-06-07T16:19:21.900 回答
0

该解决方案由 Angular github 上的 Brandonroberts 提供。有关详细信息，请参阅此问题https://github.com/angular/angular/issues/18832

解决方案摘录：“setupLocationSync 向路由器提供用于导航的 URL 的方式不适用于基于散列的路由。我所做的是调整 setupLocationSync 的源以从散列传递 URL 以进行导航。这样路由器将正确处理这两种情况。”

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

于 2018-06-07T19:01:28.617 回答