Question

我尝试使用“英雄之旅”的Angular教程

第一步工作但是当我添加一个Class Hero时，我的网络浏览器什么都没有显示

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class Hero {
  id: number;
  name: string;
}
export class AppComponent {
  hero: Hero = {
  id: 1,
  name: 'Windstorm'
};

  title = 'Tour of Heroes';


}

网络浏览器 - ＆gt;黑屏 Angular / CLI - ＆gt;没有错误

但我的网络浏览器控制台出错：

Uncaught Error: Unexpected value 'AppComponent' declared by the module 'AppModule'. Please add a @Pipe/@Directive/@Component annotation.
    at syntaxError (http://localhost/vendor.bundle.js:17688:34)
    at http://localhost/vendor.bundle.js:31420:40
    at Array.forEach (native)
    at CompileMetadataResolver.webpackJsonp.../../../compiler/@angular/compiler.es5.js.CompileMetadataResolver.getNgModuleMetadata (http://localhost/vendor.bundle.js:31402:54)
    at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler._loadModules (http://localhost/vendor.bundle.js:42679:70)
    at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler._compileModuleAndComponents (http://localhost/vendor.bundle.js:42652:36)
    at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler.compileModuleAsync (http://localhost/vendor.bundle.js:42581:37)
    at PlatformRef_.webpackJsonp.../../../core/@angular/core.es5.js.PlatformRef_._bootstrapModuleWithZone (http://localhost/vendor.bundle.js:48322:25)
    at PlatformRef_.webpackJsonp.../../../core/@angular/core.es5.js.PlatformRef_.bootstrapModule (http://localhost/vendor.bundle.js:48308:21)
    at Object.../../../../../src/main.ts (http://localhost/main.bundle.js:155:124)
syntaxError @ compiler.es5.js:1689
(anonymous) @ compiler.es5.js:15421
webpackJsonp.../../../compiler/@angular/compiler.es5.js.CompileMetadataResolver.getNgModuleMetadata @ compiler.es5.js:15403
webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler._loadModules @ compiler.es5.js:26680
webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler._compileModuleAndComponents @ compiler.es5.js:26653
webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler.compileModuleAsync @ compiler.es5.js:26582
webpackJsonp.../../../core/@angular/core.es5.js.PlatformRef_._bootstrapModuleWithZone @ core.es5.js:4595
webpackJsonp.../../../core/@angular/core.es5.js.PlatformRef_.bootstrapModule @ core.es5.js:4581
../../../../../src/main.ts @ main.ts:11
__webpack_require__ @ bootstrap 607e530…:54
2 @ main.ts:11
__webpack_require__ @ bootstrap 607e530…:54
webpackJsonpCallback @ bootstrap 607e530…:25
(anonymous) @ main.bundle.js:1

你能帮我个忙吗

氪

Answer 1

您的代码安排不正确。它应该是：

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  hero: Hero = {
    id: 1,
    name: 'Windstorm'
  };
  title = 'Tour of Heroes';
}

@Component()装饰者应该 AppComponent类。

与英雄之旅的角拳步

1 个答案: