我有一个Angular 1和Angular 2混合应用程序,它使用以下指南Upgrading from AngularJS和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{
}
我链接到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组件现在出现了?
2 回答
您的组件问题似乎在这里:
您需要添加正确的templateUrl strin
该解决方案由Angular github上的brandonroberts提供 . 有关详细信息,请参阅此问题https://github.com/angular/angular/issues/18832
摘自解决方案:“setupLocationSync为路由器提供URL以进行导航的方式与基于散列的路由无法正常工作 . 我所做的是调整setupLocationSync中的源以从散列中传递URL以进行导航 . 这种方式路由器将正确处理这两种情况 . “
有关详细信息,请参阅上述问题中的Plunker .