将 Angular 组件降级为 AngularJS

Posted 2023-02-19

【中文标题】将 Angular 组件降级为 AngularJS

【英文标题】：Downgrade Angular component to AngularJS

【发布时间】：2019-09-05 09:05:30

【问题描述】：

我正在尝试降级我的 Angular 组件以使其在 AngularJS 应用程序中使用。

为了测试，我创建了非常简单的 Angular 组件：

// my-test.component.ts
@Component(
    selector: 'my-test',
    template: '<h1>Hello World</h1>'
)
export class MyTestComponent 

之后，我在声明和 entryComponents 的 Angular 模块中注册它：

@NgModule(
    imports: [
        SharedModule,
        UpgradeModule
    ],
    declarations: [
        MyTestComponent,
       ... couple other components
    ]
    entryComponents: [ MyTestComponent ]

)
export class MyModule 
    ngDoBootstrap() 

然后我简单地创建了 angularjs 指令以使该组件在我的 angularJS 应用程序中可用。

import MyTestComponent from 'path/to/my-test.component';
import downgradeComponent from '@angular/upgrade/static';

angular.module(name, [])
.directive('myNgTest', downgradeComponent(component: MyTestComponent))

我在我的模板中使用了它

<my-ng-test></my-ng-test>

错误：

实例化组件“MyTestComponent”时出错：不是 有效的“@angular/upgrade”应用程序。您是否忘记降级 Angular 模块还是包含在 AngularJS 应用程序中？

在我阅读的所有教程中，我可能遗漏了一些关键步骤。 Angular 2 模块和 AngularJS 模块之间没有联系，但是直接导入了需要降级的组件。

欢迎任何建议！

【问题讨论】：

嗨@Andurit，您找到成功降级组件的方法了吗？如果是，您能否发布您的问题的答案？

【参考方案1】：

您还需要从angular 注入UpgradeModule 和boostrap angularjs。您还需要在您的imports 中包含UpgradeModule @NgModule。

Bootstrapping hybrid applications

要引导混合应用程序，您必须引导应用程序的每个 Angular 和 AngularJS 部分。您必须先引导 Angular 位，然后让 UpgradeModule 引导 AngularJS 位。

import  UpgradeModule  from '@angular/upgrade/static';


@NgModule( imports:[UpgradeModule])
export class MyModule 
  constructor(private readonly upgrade: UpgradeModule) 
  ngDoBootstrap() 
    this.upgrade.bootstrap(document.body, [name],  strictDi: true );
  

【讨论】：

感谢您的回答。但是我觉得这是一个有点不同的方法。我有巨大的 AngularJS 应用程序，我只想偷偷加入一些 Angular 6 组件（以后可能会用 Angular 替换我的一些 AngularJS 组件，但不是现在）。在您的情况下，它看起来更像是让我们在我的 Angular 应用程序中添加几个 AngularJS 组件。我说的对吗？

@Andurit - 尽管您仍然必须从 angular 引导 angularjs，但我的立场是正确的。在上面的代码中name 是angularjs 模块名称。另请参阅更新的答案和文档链接。

这是一个很好的观点，竖起大拇指，并在我的项目中测试它周围的一些东西。