Angular 材质组件的自定义选择器名称答案

【问题标题】：Custom Selector Names for Angular Material ComponentsAngular 材质组件的自定义选择器名称
【发布时间】：2020-03-30 15:29:44
【问题描述】：

我刚刚开始使用 angular 和 angular 材料，我不喜欢每个 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>

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

【问题讨论】：

【解决方案1】：

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

欢迎使用 Angular...

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

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

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

Angular 不能重命名选择器。它们位于项目的全局空间中，并在编译时由 AOT 解析。

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

【讨论】：