Angular 4示例教程类型脚本错误

Question

我正在试用 Angular 网站中给出的教程。我遇到了障碍，无法找出问题所在。

我使用 Angular CLI 创建了这个项目。

app.component.ts

import { Component } from '@angular/core';
import {Hero} from './hero';



const HEROES: Hero[] = [
  { id: 11, name: 'Mr. Nice' },
  { id: 12, name: 'Narco' },
  { id: 13, name: 'Bombasto' },
  { id: 14, name: 'Celeritas' },
  { id: 15, name: 'Magneta' },
  { id: 16, name: 'RubberMan' },
  { id: 17, name: 'Dynama' },
  { id: 18, name: 'Dr IQ' },
  { id: 19, name: 'Magma' },
  { id: 20, name: 'Tornado' }
];


@Component({
  selector: 'app-my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';
  selectedHero: Hero;
  heroes = HEROES;
  onSelect(hero: Hero): void {
  this.selectedHero = hero;
  }
}

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import {HeroDetailComponent} from './hero-detail.component';

@NgModule({
  declarations: [
    AppComponent,
    HeroDetailComponent
  ],
  imports: [
    BrowserModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

hero-detail.component.ts

import {Component, Input} from '@angular/core';
import {Hero} from './hero';
@Component({
selector: 'app-hero-detail',
templateUrl: './hero-detail.component.html'
})
export class HeroDetailComponent {
@Input() hero: Hero;
}

hero.ts

export class Hero {
id: number;
name: string;
}

源代码结构:

启动应用程序时出现以下 TS 错误

Failed to compile.

/Users/name/Documents/workspaces/angular-tutorial1/firstapp/src/app/hero-detail.component.ts (3,12): Argument of type '{ selector: number; templateUrl: string; }' is not assignable to parameter of type 'Component'. Types of property 'selector' are incompatible. Type 'number' is not assignable to type 'string'.

Answer 1

app-component.html 有这样一行吗？

<app-hero-detail [hero]="selectedHero"></app-hero-detail>