在Angular 1 app中使用Angular 2组件

Question

我遵循https://angular.io/docs/ts/latest/guide/upgrade.html步骤，即“使用Angular 1 Code中的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>，但什么都没看到。缺少什么？

Answer 1

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