Question

我通过官方教程（https://angular.io/docs/ts/latest/tutorial/toh-pt2.html）。我发现，出口/ @Components的顺序似乎有价值。所以，如果设置如此：

export class Hero {
  id: number;
  name: string;
}
@Component({
  selector: 'my-app',
  styleUrls: ['styles.css'],
  templateUrl: 'templates/home.html'
})
export class AppComponent {
  title = 'The untitled, unknown, unburried Heroes';
  heroes = HEROES;
  selectedHero: Hero;

  onSelect(hero: Hero): void {
    this.selectedHero = hero;
  }
}

但如果我在@Component之后重新定位第一个导出：

@Component({
  selector: 'my-app',
  styleUrls: ['styles.css'],
  templateUrl: 'templates/home.html'
})

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

export class AppComponent {
  title = 'The untitled, unknown, unburried Heroes';
  heroes = HEROES;
  selectedHero: Hero;

  onSelect(hero: Hero): void {
    this.selectedHero = hero;
  }
}

它不起作用并暴露错误：

Error: (SystemJS) Unexpected value 'AppComponent' declared by the module 'AppModule'. Please add a @Pipe/@Directive/@Component annotation.
    Error: Unexpected value 'AppComponent' declared by the module 'AppModule'. Please add a @Pipe/@Directive/@Component annotation.
        at syntaxError (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:1513:34)
        at eval (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:14455:40)
        at Array.forEach (native)
        at CompileMetadataResolver.getNgModuleMetadata (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:14437:54)
        at JitCompiler._loadModules (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:25571:64)
        at JitCompiler._compileModuleAndComponents (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:25530:52)
        at JitCompiler.compileModuleAsync (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:25492:21)
        at PlatformRef_._bootstrapModuleWithZone (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:4793:25)
        at PlatformRef_.bootstrapModule (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:4779:21)
        at Object.eval (http://localhost:3000/main.js:4:53)
    Evaluating http://localhost:3000/main.js
    Error loading http://localhost:3000/main.js
        at syntaxError (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:1513:34)
        at eval (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:14455:40)
        at Array.forEach (native)
        at CompileMetadataResolver.getNgModuleMetadata (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:14437:54)
        at JitCompiler._loadModules (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:25571:64)
        at JitCompiler._compileModuleAndComponents (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:25530:52)
        at JitCompiler.compileModuleAsync (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:25492:21)
        at PlatformRef_._bootstrapModuleWithZone (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:4793:25)
        at PlatformRef_.bootstrapModule (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:4779:21)
        at Object.eval (http://localhost:3000/main.js:4:53)
    Evaluating http://localhost:3000/main.js
    Error loading http://localhost:3000/main.js

有人知道为什么吗？

Answer 1

这是因为，如Angular组件引用（https://angular.io/docs/ts/latest/api/core/index/Component-decorator.html）所述，@Component是一个装饰器，“ 将类标记为Angular组件并收集组件配置元数据。“因此，您应该将它放在作为组件的类之前。如果您将@Component装饰器放在Hero类之前，那么您正在标记该类作为Angular组件，这是不正确的。

出现Unexpected value 'AppComponent' declared by the module 'AppModule'.错误的原因是您在AppModule中将AppComponent声明为Component，如果没有装饰器，则app模块不再识别它。希望这个解释很有帮助。

Answer 2

从外观上看，您可能会认为@Component适用于整个文件。事实并非如此！

根据定义，注释（例如@Component 注释直接在文件中出现的内容。

在您的第二个示例中，您实际上是在注释Hero，而不是AppComponent - 换句话说，您说的是Hero是一个组件！

Angular 2 / ts中的出口顺序是什么意思？

2 个答案: