如何在角度2中使用角度1指令

Question

我正在尝试将我的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中给出，但复选框未在我的页面中呈现。

Answer 1

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

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]); 

升级-adapter.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'