Angular 2 - 更改组件选择器

Question

Angular 2 - 更改组件选择器

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>和我自己的<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'

- Max Heiber

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Günter Zöchbauer · Accepted Answer

你应该给Angular2组件选择器命名空间（但不要使用ng- ）。

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

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

我不希望这种冲突经常发生。

编辑（更新来自评论的答案）

组件是模块作用域的，这使您能够使用具有相同选择器的第三方组件，例如问题中的Composable React组件。

要使用自己编写的<card>与第三方的<card>，您可以使用已导入的模块中的另一个组件将第三方组件包装起来，然后使用包装器组件即可。更新有关更改根组件选择器，请参见