如何在 angular 2 中使用 angular 1 指令答案

【问题标题】：How to use angular 1 directives in angular 2如何在 angular 2 中使用 angular 1 指令
【发布时间】：2016-12-29 01:56:45
【问题描述】：

我正在尝试将我的 Angular 1 指令迁移到 Angular 2。这是我的简单 Angular 1 指令

extCheckbox.html

           <input type=checkbox
            name ="{{checkboxName}}"
            id="{{checkboxId}}"
            data-ng-readonly="isReadonly"
             data-ng-checked="isChecked"/>

这是我的指令 extCheckbox.js

var app = angular.module('Demo');

app.directive('extCheckbox', [function () {
    return {
        restrict: 'E',
        scope: {

            label: '@',
            name: '@',
            id: '@',
            isDisabled: '=?',
            isReadonly: '=?',
            isChecked: '=?',
        },
        templateUrl: './extCheckbox.html',
        replace: true,
        transclude: false,
        link: function (scope, element, attrs) {
            if (attrs.isChecked === undefined) {
                scope.isChecked =true;
            }
        }
    };
}]);

我将其迁移到 Angular 2，如下所示，

extCheckbox.Component.ts

import {Component} from '@angular/core';
import {UpgradeAdapter} from '@angular/upgrade';
const upgradeAdapter = new UpgradeAdapter();

let ExtCheckbox = upgradeAdapter.upgradeNg1Component('ext-Checkbox');

@Component({
    selector: 'ext-mycheckbox',
    template: '<ext-checkbox></ext-checkbox>',
    directives: [ExtCheckbox]
})


export class checkboxComponent{

}

app.components.ts

import {Component} from '@angular/core';
import {checkboxComponent} from './extCheckbox.Component';

@Component({
  selector: 'my-app',
  template: '<h1>checkboxComponent</h1><ext-mycheckbox></ext-mycheckbox>',
  directives:[checkboxComponent]
 })

export class AppComponent { 

}

选择器 my-app 元素已在我的 index.html 中给出，但复选框未在我的页面中呈现。

【问题讨论】：

标签： javascript angularjs html angular typescript

【解决方案1】：

您似乎错误地引导应用程序。为了在 Angular 2 应用程序中使用 Angular 1 指令，您必须并行运行 Angular 1 和 Angular 2 库。下面是我如何设置一个真正的、工作的混合 Angular 应用程序的示例：

main.js

import 'ts-helpers';
import './rxjs-operators';
import { upgradeAdapter } from './upgrade-adapter';
import { AppFlockModule } from '../appflock.module';

import app from '../appflock';

// workaround for cyclical dependency problem when using ng1 components in ng2 modules
// https://github.com/angular/angular/issues/11069
upgradeAdapter['ng2AppModule'] = AppFlockModule;

upgradeAdapter.bootstrap(document.body, [app]);

升级适配器.ts

import { NgModule } from '@angular/core';
import { UpgradeAdapter } from '@angular/upgrade';
import { uiRouterNgUpgrade } from 'ui-router-ng1-to-ng2';

// workaround for cyclical dependency problem when using ng1 components in ng2 modules
// https://github.com/angular/angular/issues/11069
@NgModule({})
class DummyModule {}

export const upgradeAdapter = new UpgradeAdapter(DummyModule);

uiRouterNgUpgrade.setUpgradeAdapter(upgradeAdapter);
upgradeAdapter.upgradeNg1Provider('$stateParams');

AppFlockModule 是我的应用程序的主要 Angular 2 模块。

因此 upgradeAdapter 需要是您导入的单例（如我的示例中）

另外，在您的示例中，您有一个错字：应该是 upgradeAdapter.upgradeNg1Component('extCheckbox');而不是'ext-Checkbox'

【讨论】：