Question

我有一个Angular 2组件，我想在我的Visual Studio项目中的Angular 1应用程序中运行，但我似乎无法让它工作。该应用程序来自角度网站（PhoneCat）上的升级教程。该应用程序完全正常运行。

我已将该应用程序放在GitHub上here.

我将upgradeAdapter放在一个名为upgradeAdapter.ts

的单独文件中

在应用程序启动时，在main.ts文件中实例化。

我尝试将降级后的组件添加到main.ts文件和app.module.ng1.ts文件（这是加载原始角度1应用程序的位置。）

但是当我添加指令时，网站会中断并且不会呈现任何内容。

下面是我在模板顶部添加角度2组件的模板，称为my-app。

<my-app>Loading...</my-app>

<div class="container-fluid">
  <div class="row">
    <div class="col-md-2">
      <!--Sidebar content-->

      <p>
        Search:
        <input ng-model="$ctrl.query" />
      </p>

      <p>
        Sort by:
        <select ng-model="$ctrl.orderProp">
          <option value="name">Alphabetical</option>
          <option value="age">Newest</option>
        </select>
      </p>

    </div>
    <div class="col-md-10">
      <!--Body content-->

      <ul class="phones">
        <li ng-repeat="phone in $ctrl.phones | filter:$ctrl.query | orderBy:$ctrl.orderProp"
            class="thumbnail phone-list-item">
          <a href="#!/phones/{{phone.id}}" class="thumb">
            <img ng-src="{{phone.imageUrl}}" alt="{{phone.name}}" />
          </a>
          <a href="#!/phones/{{phone.id}}">{{phone.name}}</a>
          <p>{{phone.snippet}}</p>
        </li>
      </ul>

    </div>
  </div>
</div>

我的应用是一个简单的Angular 2组件：

import { Component } from '@angular/core';

@Component({
    selector: 'my-app',
    template: `<h1>My First Angular App</h1>`
})
export class AppComponent { }

我试图在调用bootstrap之前降级组件：

import { upgradeAdapter } from './upgradeAdapter';
import { AppModule } from './app.module';

//import components that need to be downgraded
import { AppComponent } from './app.component';

declare var angular: any;
angular.module("phonecatApp", [])
  .directive("myApp", <angular.IDirectiveFactory>upgradeAdapter.downgradeNg2Component(AppComponent));

upgradeAdapter.bootstrap(document.body, ["phonecatApp"]);

这不起作用，所以我把它拿出来并添加到app.module.ng1.ts文件中，该文件是声明模块的地方：

import { upgradeAdapter } from './upgradeAdapter';
import { AppComponent } from './app.component';
declare var angular: any;

'use strict';

// Define the `phonecatApp` module
angular.module('phonecatApp', [
  'ngAnimate',
  'ngRoute',
  'core',
  'phoneDetail',
  'phoneList'
]); 

angular.module("phonecatApp", [])
  .directive("myApp", upgradeAdapter.downgradeNg2Component(AppComponent));

但这些都不起作用。我需要能够让Angular 1和Angular 2相互协作，将Angular 2组件引入到Angular 1中。

我可能做错了什么？

Answer 1

在这一行：

angular.module("phonecatApp", [])
  .directive("myApp", 
      <angular.IDirectiveFactory>
      upgradeAdapter.downgradeNg2Component(AppComponent)
  );

您只需删除, []即可。角度模块已经被声明，再次执行会破坏应用程序。

无法在Visual Studio 2015中的Angular 1组件中运行Angular 2组件

1 个答案: