Angular 2——改变组件选择器答案

【问题标题】：Angular 2—change component selectorAngular 2——改变组件选择器
【发布时间】：2017-01-24 18:36:08
【问题描述】：

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'

【问题讨论】：

标签： angular css-selectors angular-components

【解决方案1】：

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

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

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

我不认为这样的冲突会发生很多。

编辑（更新来自 cmets 的答案）

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

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

更新

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

【讨论】：

如果您在代码中定义视图，变量会很好地工作，但这不是 Angular2 选择的方式。
我真的希望手动命名空间不是一个容易解决的问题的最佳实践解决方案（在 AngularJS 版本 5 年后）。Backbone、Ember、React、Mithril、Snabbdom、Cycle、 Elm、CanJS 等等等。我只是确定一定有人考虑过这个问题，并且在 Angular 2 中有更好的解决方案，我只是找不到。
它是模块范围的，因此不太可能发生冲突。我所知道的计划是允许通过。根组件的自定义选择器。
当你构建一个模块时，你必须导入包含你想要使用的组件的模块。你不能导入冲突的模块，但你可以在不同的模块中有“冲突”的元素。在您的应用中，您可以根据需要使用具有相同选择器的任意多个元素，但在一个模块中它们必须是唯一的。
你需要用另一个组件来包装它，这个组件是导入模块的一部分，然后使用包装器组件。