Angular 2没有为选择箭头div生成唯一的组件标识符答案

【问题标题】：Angular 2 no unique component identifier generated for select arrow divAngular 2没有为选择箭头div生成唯一的组件标识符
【发布时间】：2026-01-03 07:40:02
【问题描述】：

我正在尝试从有角度的材料选择组件中删除箭头。为此，我有一个自定义 CSS 文件，其中我说 display: none。这是代码： https://stackblitz.com/edit/angular2-remove-select-arrow

但由于我的 CSS 是为此组件自定义的，我看到没有为箭头 div 生成唯一标识符，因此未应用 CSS。

您能否告诉我实现这一目标的最佳方法是什么？

感谢您的帮助。迈克

【问题讨论】：

标签： css angular angular-material2

【解决方案1】：

当您在组件的 CSS 文件中声明样式时，自定义属性会自动添加到其中，因此 CSS 不会应用到当前组件之外。但是，当您想将 CSS 应用于其他组件时，这会导致问题，在本例中为 mat-select。

有两种方法可以解决这个问题

在组件中将encapsulation 设置为无

@Component({
    selector: 'select-form-example',
    templateUrl: 'select-form-example.html',
    styleUrls: ['select-form-example.css'],
    encapsulation: ViewEncapsulation.None,
})
export class SelectFormExample {

}

在 style.css 文件中添加自定义样式，而不是在组件的 CSS 文件中 select-form-example.css

我已经用第一步更新了stackblitz

【讨论】：

谢谢。这样做将适用于我的所有其他组件，但现在让我们保持简单。稍后我会看到我是否想要/需要从此选择中创建一个没有箭头的自定义组件。
如果你在 html 文件的 mat-select 元素的 stackblitz 演示中添加了一个类似于 custom-select 的类，那么它将不适用于所有组件，因为你只会在如果您想隐藏箭头。

【解决方案2】：

在您的情况下使用::ng-deep，但请注意，这个已经被弃用了。
现在你的 css 规则变成了这样：::ng-deep .staffing-cell .mat-select-arrow-wrapper

弃用信息：https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep

现在对于您需要利用材料主题的“适当”方式，您可以在他们的文档中查找：https://material.angular.io/guide/theming

【讨论】：