javascript - 简单的 Angular 组件引发许多错误

Question

我对 Angular 2(MEAN 堆栈)完全陌生。我一小时前就开始了。

我正在关注新手官方教程 ( 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:

尝试像这样降级 Zone.JS npm i --save zone.js@0.7.2 (以前是 0.7.5)只是破坏了一些东西。现在 npm start 抛出此错误:

<小时/>

编辑2:

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

"start": "同时\"npm run tsc:w\"\"npm run lite\"",

似乎工作正常(现在本地主机正在工作)。

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

Answer 1

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

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

正确的代码如下所示:

...
@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'
    };
}