简单的Angular组件抛出许多错误

Question

我对Angular 2（MEAN堆栈）完全不熟悉。我在1小时前就开始了。

我正在关注新手的官方教程（https://angular.io/docs/ts/latest/tutorial/toh-pt1.html）

我有app.component.ts：

import { Component } from '@angular/core';

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

hero: Hero = {
    id: 1,
    name: 'Windstorm'
};

@Component({
  selector: 'my-app',
  template: '<h1>{{title}}</h1> <h2>{{hero.name}} details!</h2>'
})

export class AppComponent  { 
    title = 'Tour of Heroes';
}

正如教程所说，必须这样做。现在，控制台给我带来了很多错误。

我对这可能是什么问题一无所知。

修改1：

试图像这样npm i --save zone.js@0.7.2（之前为0.7.5）降级Zone.JS只是打破了一些东西。现在npm start抛出此错误：

编辑2：

我将package.json中的起始对象修改为：

"start": "concurrently \"npm run tsc:w\" \"npm run lite\" ",

似乎正常工作（现在localhost正在运行）。

控制台会一直显示错误，如上图所示。

Answer 1

您的代码稍有不正确。 hero实例位于错误的位置。

为了可以访问应用程序的其他部分（以及模板），实例需要位于export内。您收到的错误提醒您，您正在尝试使用未导出的实例创建模板绑定。

正确的代码如下所示：

...
@Component({
  selector: 'my-app',
  template: '<h1>{{title}}</h1> <h2>{{hero.name}} details!</h2>'
})

export class AppComponent  { 
    title = 'Tour of Heroes';
    hero: Hero = {
      id: 1,
      name: 'Windstorm'
    };
}

Answer 2

<h2>{{hero.name}} 

无效，因为组件类没有hero字段，组件实例是视图中绑定的范围