角材质标签标题不需要的行为

Question

我在使用MatTabsModuleAngular Material 时遇到过这种奇怪的行为。尽管控制台中没有错误，但当我单击选项卡时，选项卡标题会拉伸。

应用程序.html

<nav mat-tab-nav-bar>
  <a mat-tab-link>
    Tab1 (click me to see the bug)
  </a>
  <a mat-tab-link>
    Tab2
  </a>
</nav>

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

"dependencies": {
    "@angular/animations": "^5.1.1",
    "@angular/cdk": "5.0.0-rc.3",
    "@angular/common": "^5.1.1",
    "@angular/compiler": "^5.1.1",
    "@angular/core": "^5.1.1",
    "@angular/forms": "^5.1.1",
    "@angular/http": "^5.1.1",
    "@angular/material": "5.0.0-rc.3",
    "@angular/platform-browser": "^5.1.1",
    "@angular/platform-browser-dynamic": "^5.1.1",
    "@angular/router": "^5.1.1",
    "core-js": "^2.4.1",
    "rxjs": "^5.5.5",
    "zone.js": "^0.8.14"
  },
  "devDependencies": {
    "@angular/cli": "^1.6.7",
    "@angular/compiler-cli": "^5.2.0",
    "@angular/language-service": "^5.2.0",
    "@types/jasmine": "~2.8.3",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "codelyzer": "^4.0.1",
    "jasmine-core": "~2.8.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~2.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.2",
    "ts-node": "~4.1.0",
    "tslint": "~5.9.1",
    "typescript": "~2.5.3"
  }

对于其他一切

这是一个Stack-blitz 演示

Answer 1

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

因此styles.css，只要您的项目使用 Angular CLI，就将其包含在您的.

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

参考：Angular Material 入门

工作堆栈闪电战