6

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

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

如果我这样做，我是否会坚持<card>作为将来使用此组件的唯一方法？使用此选择器的应用程序可以只有一种类型的组件吗？例如，是否可以使用<card>来自第三方库的 a，也可以使用我自己的<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'

4

1 回答 1

4

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

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

这将您限制为在一个模块中具有特定选择器的一个组件。如果遇到冲突，您可以将代码拆分为 2 个模块，其中一个模块从.<card>ModuleA<card>ModuleB

我不认为这样的碰撞会发生很多。

编辑（更新评论中的答案）

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

要将<card>您编写的与第三方一起使用<card>，您可以将第三方组件与作为导入模块一部分的另一个组件包装在一起，然后使用包装器组件。

更新

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

于 2016-09-16T13:50:47.610 回答