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 中包含它，因为 thenupgradeAdapter不存在并且 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 回答