如何使用角1指示在角2

Question

我試圖遷移我的角1個指令角2.這是我簡單的角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; 
      } 
     } 
    }; 
}]); 

我遷移這角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 { 

} 

的選擇我的應用程序內元素已在我的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'