Javascript 降级的Angular2组件未在Angular1内部渲染
我们有一个独特的情况,我们使用typescript,混合使用ng1和NG2,但不使用任何模块加载器。我能够引导NG1和ng2,但我无法从降级的angular 2组件获得任何响应,我在代码中放置了一个断点,看到代码运行,但组件没有显示任何内容 我没有得到任何错误,在编译阶段和运行时都没有 代码如下: myapp.js-angular 1应用程序定义,es2015Javascript 降级的Angular2组件未在Angular1内部渲染,javascript,angularjs,angular,typescript,Javascript,Angularjs,Angular,Typescript,我们有一个独特的情况,我们使用typescript,混合使用ng1和NG2,但不使用任何模块加载器。我能够引导NG1和ng2,但我无法从降级的angular 2组件获得任何响应,我在代码中放置了一个断点,看到代码运行,但组件没有显示任何内容 我没有得到任何错误,在编译阶段和运行时都没有 代码如下: myapp.js-angular 1应用程序定义,es2015 (function() { 'use strict'; angular.module('myApp', []); })(
(function() {
'use strict';
angular.module('myApp', []);
})();
myapp.ng2.ts-angular 2应用程序定义,类型脚本
namespace MyApp {
let NgModule = ng.core.NgModule;
let BrowserModule = ng.platformBrowser.BrowserModule;
let UpgradeAdapter = ng.upgrade.UpgradeAdapter;
@NgModule({
imports: [BrowserModule]
})
export class MyAppNg2 {}
export const upgradeAdapter = new UpgradeAdapter(MyAppNg2);
$(document).ready(function() {
upgradeAdapter.bootstrap(document.body, ['MyApp'], {strictDi: false});
});
}
namespace MyApp.Components.Misc {
let Component = ng.core.Component;
@Component({
selector: 'full-details-header',
template: `This is ng2 component`
})
export class FullDetailsHeaderComponent {
}
}
fullDetails.component.ts-angular 2,typescript
namespace MyApp {
let NgModule = ng.core.NgModule;
let BrowserModule = ng.platformBrowser.BrowserModule;
let UpgradeAdapter = ng.upgrade.UpgradeAdapter;
@NgModule({
imports: [BrowserModule]
})
export class MyAppNg2 {}
export const upgradeAdapter = new UpgradeAdapter(MyAppNg2);
$(document).ready(function() {
upgradeAdapter.bootstrap(document.body, ['MyApp'], {strictDi: false});
});
}
namespace MyApp.Components.Misc {
let Component = ng.core.Component;
@Component({
selector: 'full-details-header',
template: `This is ng2 component`
})
export class FullDetailsHeaderComponent {
}
}
bootstrap.js-angular1,es2015
angular.module('myApp').component('fullDetailsHeader', MyApp.upgradeAdapter.downgradeNg2Component(MyApp.Components.Misc.FullDetailsHeaderComponent));
这有点难说,因为我认为这是针对Angular的beta版,我还没有对其进行升级,但对于Angular 2+版,您还需要在主模块的
entryComponents
数组中声明要降级的组件:
@NgModule({
imports: [BrowserModule],
entryComponents: [FullDetailsHeaderComponent]
})
假设这是针对Angular beta版的,并且您没有太多工作,我会放弃它,使用Angular的最新版本,并遵循以下步骤。我看到的在Angular的beta版和发行版之间创建ng1/ng2混合应用程序的示例中有太多不同之处,我觉得不值得对beta升级过程中出现的问题进行故障排除
这仍然是一个很难搜索问题和示例的区域,因此如果您有与Angular versions 2+升级过程相关的问题,请提出新问题并ping我
首先,这里有一个示例,展示了一个降级角度组件并在AngularJS中使用它的工作示例。这也在降级过程中使用了多重转换,这只适用于版本4.0.0+ 你找到解决办法了吗?