在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.