Javascript 如何在angular 2中使用angular 1指令

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

extCheckbox.html

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

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

extCheckbox.Component.ts

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

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{

}

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 { 

}

从'@angular/core'导入{Component}；
从'@angular/upgrade'导入{UpgradeAdapter}；
const upgradeAdapter=新的upgradeAdapter（）；
让ExtCheckbox=upgradeAdapter.upgradeNg1Component（'ext-Checkbox'）；
@组成部分({
选择器：“ext mycheckbox”，
模板：“”，
指令：[ExtCheckbox]
})
导出类checkboxComponent{
}

应用程序组件.ts

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

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{

}

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 { 

}

从'@angular/core'导入{Component}；
从“./extCheckbox.Component”导入{checkboxComponent}；
@组成部分({
选择器：“我的应用程序”，
模板：“checkboxComponent”，
指令：[checkboxComponent]
})
导出类AppComponent{
}

---

我的index.html中提供了选择器我的应用程序元素，但复选框未显示在我的页面中。

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

main.js

导入“ts助手”；
导入“/rxjs运算符”；
从“./升级适配器”导入{upgradeAdapter}；
从“../appflock.module”导入{AppFlockModule}；
从“../appflock”导入应用程序；
//在ng2模块中使用ng1组件时循环依赖性问题的解决方法
// https://github.com/angular/angular/issues/11069
升级适配器['ng2AppModule']=AppModule；
upgradeAdapter.bootstrap（document.body，[app]）您似乎未正确引导应用程序。为了在Angular 2应用程序中使用Angular 1指令，您必须并排运行Angular 1和Angular 2库。下面是我如何设置一个真实、工作的混合角度应用程序的示例：

main.js


导入“ts助手”；
导入“/rxjs运算符”；
从“./升级适配器”导入{upgradeAdapter}；
从“../appflock.module”导入{AppFlockModule}；
从“../appflock”导入应用程序；
//在ng2模块中使用ng1组件时循环依赖性问题的解决方法
// https://github.com/angular/angular/issues/11069
升级适配器['ng2AppModule']=AppModule；
upgradeAdapter.bootstrap（document.body，[app]）