0

私はapp.js角度があり1.4ます。app.js には以下が含まれます。

var app = angular.module('testingBoot',[...], function(){});

別のファイルを作成しています: test.ts. これには以下が含まれます。

import {bootstrap} from 'angular2/platform/browser';
import {UpgradeAdapter} from 'angular2/upgrade';
import {AppComponent} from './app.component';

const upgradeAdapter = new UpgradeAdapter();
upgradeAdapter.bootstrap(document.body, ['testingBoot']);

Index.html:

<script src="/flat-ui/libs/es6-shim.min.js"></script>
    <script src="/flat-ui/libs/systemjs/dist/system.src.js"></script>
    <script src="/flat-ui/libs/angular2-polyfills.js"></script>
    <script src="/flat-ui/libs/systemjs/dist/system.src.js"></script>
    <script src="/flat-ui/libs/Rx.js"></script>
    <script src="/flat-ui/libs/angular2.dev.js"></script>
<script>
 System.config({
       baseURL : '/',
       defaultJSExtension: true,
       map: {
           mainTest : './flat-ui/js/typeScript',
           angular2 : '/flat-ui/libs/angular2'
       },
        packages: {
          mainTest: {
              format: 'register',
            defaultExtension: 'js'
          },
          angular2 : {
              baseURL : '/flat-ui/libs/angular2',
              defaultExtension: 'js'
          }
        }
      });
 System.import('mainTest/test')
      .then(null, console.error.bind(console));
</script>
<script type="text/javascript" src="/flat/js/app.js"></script>

これがすべて正常に機能し、angular 1 アプリがうまくブートストラップするまで。

問題は、Angular 2 で作成されたコンポーネントをディレクティブとして Angular 1 に含める必要があることです。

ドキュメントによると、私が書く必要があるのは次のとおりです。

angular.module('testingBoot').directive('testingOnActivity', upgradeAdapter.downgradeNg2Component(AppComponent));

しかし、これをどこに、どのファイルに含めますか? これを test.ts に含めると、angular定義されていないエラーが発生し、app.js にこれを含めることができませupgradeAdapterん。存在しないため、app.js

4

1 に答える 1

2

次の間に含めることができます。

const upgradeAdapter = new UpgradeAdapter();
upgradeAdapter.bootstrap(document.body, ['testingBoot']);

私のboot.ts：

import {UpgradeAdapter} from 'angular2/upgrade';
import {bootstrap}    from 'angular2/platform/browser'
import {AppComponent} from './app.component'

declare var angular:any;

export const upgradeAdapter = new UpgradeAdapter();
myApp.directive('testDirective', upgradeAdapter.downgradeNg2Component(AppComponent));

upgradeAdapter.bootstrap(document.body, ['myApp']);
于 2016-02-28T20:26:16.953 に答える