Angular Material 个组件的自定义选择器名称

Question

我刚刚开始使用 angular 和 angular material，我不喜欢每个 angular-material 组件以 mat 开头的方式。例如：

<mat-sidenav-container>
  <mat-sidenav>...</mat-sidenav>
  <mat-sidenav-content>...</mat-sidenav-content>
</mat-sidenav-container>

有没有办法为这些组件提供自定义选择器名称？即，像这样：

<SidenavContainer>
  <Sidenav>...</Sidenav>
  <SidenavContent>...</SidenavContent>      
</SidenavContainer>

如果是这样，我该怎么做？

Answer 1

<SidenavContainer> 是一个非常像 React 的组件。

欢迎来到Angular...

约定是不同的，随着时间的推移你会习惯它，但我们有前缀的原因是因为 Angular 和 React 解析组件非常不同。

React 可以导入一个组件引用，如果你有两个同名的组件，你可以重命名导入。

import {SidenavContainer} from './src/SidenavContainer';
import {SidenavContainer as SidenavContainerOther} from '../other/src/SidenavContainer';

Angular 无法 重命名 选择器。它们在项目的 global space 中，并在编译时由 AOT 解析。

所以我们必须使用前缀来将我们的组件与其他人的组件隔离开来。因此，您将创建 <app-sidenav-container>，这样它就不会与另一个库中的 <mat-sidenav-container> 发生冲突。

Custom Selector Names for Angular Material Components