角度2变化组件选择器

Question

该角2个文档说,像这样定义一个组件,使用魔法字符串选择名称:

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 个模块，其中一个模块从导入，另一个模块从导入。<card>ModuleA<card>ModuleB

我没想到这样的碰撞会经常发生。

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

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

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

更新

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

• https://github.com/angular/angular/pull/14750
• https://github.com/angular/angular/issues/7136
• https://github.com/angular/angular/issues/13035