Question

Angular 2 docs说要使用魔术字符串作为选择器名称来定义这样的组件：

import { Component } from '@angular/core';
@Component({
  selector: 'card',
  template: `
    <div class="card">{{title}}</card>
    `
})
export class Card {
  title = 'Card Title';
}

如果我这样做，我是否坚持使用<card>作为将来使用此组件的唯一方法？应用程序是否只有一种带有此选择器的组件？例如，是否可以使用第三方库中的<card>，还可以使用我自己的<card>？

这在React中是微不足道的，因为组件名称只是变量。

import OtherCard from 'card'
const Card = title => <div className="card">{title}</div>
const Composable = title => <OtherCard><Card title={title} /></OtherCard>

我问的其中一个原因是我可以知道是否在Angular 1和Objective-C中命名Angular 2组件选择器：

selector: 'initech-card'

Answer 1

您应该命名Angular2组件选择器（但不能使用ng- ;-)）

我认为您无法导入包含具有相同选择器的元素的2个模块（未尝试过）。

这会将您限制为一个组件，并在一个模块中使用特定选择器。如果遇到冲突，您可以将代码拆分为2个模块，其中一个模块从<card>导入ModuleA，另一个模块从<card>导入ModuleB。

我不希望这种碰撞发生很多。

编辑（更新评论的答案）

组件是模块范围的，它使您能够使用具有相同选择器的第三方组件的组件，就像问题示例中的Composable React组件一样。

要使用您使用第三方<card>编写的<card>，您可以使用属于导入模块的另一个组件包装第三方组件，然后使用包装器组件。

<强>更新

要更改根组件的选择器，另请参阅

角度2变化组件选择器

1 个答案:

编辑（更新评论的答案）