当Angular 2中的文件中有两个类，一个装饰器/一个类两个装饰器时会发生什么？

Question

@Component({
   selector: 'my-cmp',
   template: '<div>Hello World!</div>'
}) // here component metadata

export class MyComponent {

}

所以，以上是我的实际组件文件。如果我有另一个班级

@Component({
   selector: 'my-cmp',
   template: '<div>Hello World!</div>'
}) // here component metadata

export class MyComponent {

}

export class MyAnotherComponent {

}

和

@Component({
   selector: 'my-cmp',
   template: '<div>Hello World!</div>'
}) // here component metadata
@Component({
   selector: 'my-cmpnt',
   template: '<div>Hello Something!</div>'
}) // here component metadata

export class MyComponent {

}

现在，我有任何错误吗？会发生什么？

Answer 1

两个班级和一个装饰家

@Component装饰器应用于紧跟装饰器后面的类。所以在你的情况下，它适用于MyComponent。现在，在模块声明中指定哪个类也很重要。如果你指定MyComponent - 一切都应该没问题。如果您指定MyAnotherComponent - 则会收到错误消息：

  

模块'AppModule'声明的意外值'MyAnotherComponent'。   请添加@ Pipe / @ Directive / @ Component注释。

因为Angular会抱怨此类不是组件的实例，因为装饰器未应用于它。

您可以详细了解@Component装饰器及其工作原理here。

两个装饰者和一个类

简而言之，只使用了第一个装饰器。

如果在同一个类上使用两个装饰器，则两个装饰器将应用于类并以相反顺序在该类上存储元数据，以便第一个装饰器属性存储在最后一个索引中。当编译器解析元数据时，它使用findLast函数获取最后的元数据属性，该函数基本上选择文件中的第一个装饰器属性。

因此，在您的情况下，只支持my-cmp。如果您在html my-cmpnt标记中使用，则会收到错误消息：

  

模板解析错误：'my-cmpnt'不是已知元素：

Answer 2

您不能拥有包含两个组件装饰器的组件（@Component）。您需要为此创建两个不同的类：

@Component({
    selector: 'app',
    template: `<h1>Title Here</h1>`
})
export class AppComponent { }

@Component({
    selector: 'appTwo',
    template: `<h1>Another Title Here</h1>`
})
export class AppComponent1 { }