Angular 2 / ts 中的出口顺序是否有意义？答案

【问题标题】：Has order of exports in Angular 2 / ts meaning?Angular 2 / ts 中的出口顺序是否有意义？
【发布时间】：2017-10-18 08:22:05
【问题描述】：

我浏览了一个官方教程 (https://angular.io/docs/ts/latest/tutorial/toh-pt2.html)。而且我发现，exports / @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

有人知道为什么吗？

【问题讨论】：

在您的第二个示例中，您正在注释 Hero，而不是 AppComponent - 这是问题所在，而不是课程顺序。根据定义，注释附加到它们之后的事物上。
我认为你在哪里定义你的类并不重要。似乎是不同的错误

标签： angular typescript angularjs-components

【解决方案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，并且没有装饰器，应用程序模块将无法识别它。希望解释对您有所帮助。

【讨论】：

【解决方案2】：

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

根据定义，@Component 等注释注释文件中紧随其后的内容。

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

【讨论】：