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

Question

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

已创建英雄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)); 

现在我插入<hero-detail></hero-detail>在我的HTML，但见没有。什么不见​​了？

Answer 1

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