angular2 upgradeAdapter：从 UpgradeAdapter 获取 ng1 指令的参考？答案

【问题标题】：angular2 upgradeAdapter: get reference of ng1-directive from the UpgradeAdapter?angular2 upgradeAdapter：从 UpgradeAdapter 获取 ng1 指令的参考？
【发布时间】：2016-03-15 18:21:36
【问题描述】：

我可以轻松地将 angular2 提供程序添加到 UpgradeAdapter：

import { HTTP_PROVIDERS } from 'angular2/http';
upgradeAdapter.addProvider(HTTP_PROVIDERS);

我可以升级一个 ng1 指令（组件）也很容易：

const DirectiveNg1 = upgradeAdapter.upgradeNg1Component('DirectiveNg1');

但是我在很多地方都需要DirectiveNg1，并且想在 angular2 组件中使用它们。是否有可能以某种方式获得参考？

目前我在我的 angular2 组件中指定了以下内容并且它可以工作，但我只想在 main.js 文件中使用一次upgradeNg1Component('DirectiveNg1')。

const DirectiveNg1 = upgradeAdapter.upgradeNg1Component('DirectiveNg1');
// how can I replace the line above, and get a reference from the UpgradeAdapter
@Component({
    directives: [DirectiveNg1],
    ...
})

【问题讨论】：

标签： angularjs-directive angular angular2-upgrade

【解决方案1】：

我知道这篇文章有点老了，但这花了我很长时间的互联网搜索才能解决。我认为这方面的文档不是很好。

这种最简单的方法是如果您只需要一个模块。你可以定义如下。

import { NgModule, forwardRef } from '@angular/core';
import { UpgradeAdapter } from '@angular/upgrade';

export const upgradeAdapter = new UpgradeAdapter(forwardRef(() => AppModule ));
const DirectiveNg1 = upgradeAdapter.upgradeNg1Component('DirectiveNg1');

@NgModule({
 imports: [BrowserModule, HttpModule],
 providers: [],
 declarations: [DirectiveNg1],
 exports: []
})
export class AppModule { }

现在 DirectiveNg1 可以在 angular2 组件中使用。

【讨论】：