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

＆＃13;

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

＆＃13;

升级-adapter.ts

＆＃13;

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

＆＃13;

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

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

此外，在您的示例中，您有一个拼写错误：它应该是upgradeAdapter.upgradeNg1Component（＆＃39; extCheckbox＆＃39;）;而不是＆＃39; ext-Checkbox＆＃39;

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

1 个答案: