降级的Angular2组件没有在angular 1中渲染

Downgraded Angular2 component not rendered inside angular 1

本文关键字：angular Angular2 组件 降级      更新时间：2023-09-26

我们有一个独特的情况，我们使用typescript，混合使用ng1和ng2，但没有使用任何模块加载器。我能够引导ng1和ng2，但是我不能从降级的angular 2组件中得到任何响应，我在代码中放置了一个断点，看到代码运行，但组件没有显示任何东西。

我没有得到任何错误，不是在编译阶段，也不是在运行时

代码如下:

myapp.js - angular 1应用定义，es2015

(function() {
    'use strict';
    angular.module('myApp', []);
})();

myapp.ng2。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});
});
}

fullDetails.component.ts - angular 2, typescript

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的测试版，我还没有做过升级过程，但对于Angular版本2+，你还需要在主模块的entryComponents数组中声明你想要降级的组件:

@NgModule({
   imports: [BrowserModule],
   entryComponents: [FullDetailsHeaderComponent]
})

假设这是针对Angular测试版的，你没有太多工作要做，我会放弃它，使用最新版本的Angular，并遵循官方指南。在Angular的测试版和发行版之间创建ng1/ng2混合应用的例子中，有太多不同之处，我觉得不值得在测试版升级过程中排除相关问题。

这仍然是一个很难搜索问题和示例的区域，所以如果你有关于Angular版本2+升级过程的问题，请创建一个新的问题，并给我发邮件。

作为入门，这里有一个示例，它展示了一个降级Angular组件并在AngularJS中使用它的工作示例。这也在降级过程中使用了多次透传，这只适用于版本4.0.0+。

相关文章：