在 Angular 1 应用程序中使用 Angular 2 组件答案

【问题标题】：Using Angular 2 component in Angular 1 app在 Angular 1 应用程序中使用 Angular 2 组件
【发布时间】：2016-10-05 14:35:28
【问题描述】：

我正在遵循https://angular.io/docs/ts/latest/guide/upgrade.html 的步骤，即“使用 Angular 1 代码中的 Angular 2 组件”部分。

已使用以下代码创建 hero-detail.component.ts：

import { Component } from '@angular/core';
@Component({
  selector: 'hero-detail',
  template: `
    <h2>Windstorm details!</h2>
    <div><label>id: </label>1</div>
  `
})
export class HeroDetailComponent {
}

然后将所需的代码添加到 main.ts：

import { upgradeAdapter } from './upgrade-adapter'; //this existed already
import { HeroDetailComponent } from './hero-detail.component'; //added

//... here other code inbetween

angular.module('heroApp', [])
  .directive('heroDetail', upgradeAdapter.downgradeNg2Component(HeroDetailComponent));

现在我在我的 html 中插入 <hero-detail></hero-detail>，但什么也看不到。缺少什么？

【问题讨论】：

标签： angularjs angular

【解决方案1】：

代码的指令部分应该已经添加到 app.ts，而不是 main.ts。

【讨论】：