角度材料选项标题不需要的行为

Question

我使用Angular Material的ans[1][1]遇到了这种奇怪的行为。虽然我在控制台中没有错误，但是当我单击选项卡时选项卡标题会拉伸。

app.html

'$'

我再说一遍，控制台没有错误。我的依赖是：

MatTabsModule

其他一切

这里是Stack-blitz demo

Answer 1

Angular Material模块需要使用一些主题来设置其组件的样式。这些样式也会影响转换，从而影响动画的处理方式。因此，如果不包含主题，您将看到元素中的跳跃。这些主题完全可以自定义，但如果您只想开始使用基本主题，他们建议您使用默认主题。

只要您的项目使用Angular CLI，就在您的styles.css中包含此内容：

@import "~@angular/material/prebuilt-themes/indigo-pink.css";

参考：Angular Material Getting Started

Working StackBlitz