javascript - Angular material Flikar titel oönskat beteende

Jag har stött på detta konstiga beteende när jag använder MatTabsModule från Angular Material. Flikarnas titlar sträcker sig när jag klickar på en flik, även om jag inte har något fel i konsolen.

app.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>

Jag upprepar att det inte finns något fel i konsolen. Mina beroenden är:

"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"
  }

För allt annat

Här är en Stack-blitz-demo

Svar #1

Angular Material-modulen kräver att man använder ett tema för att styla dess komponenter. Dessa stilar påverkar också transformationer, och därmed hur animationer hanteras. Så utan att inkludera ett tema kommer du att se hopp i dina element. Teman är ganska fullt anpassningsbara, men om du bara vill komma igång med det grundläggande rekommenderar de att använda ett standardtema.

Så inkludera detta i din styles.css, så länge ditt projekt använder Angular CLI:

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

Referens: Komma igång med Angular Material

Arbetar StackBlitz

Svar #2

Om du redan har ett tema tillagt i din angular.json-fil kanske du inte har startat om den lokala servern efter att ha lagt till materialmodulen. Stoppa bara servern med 'ctrl+c' och starta den sedan igen. Nu bör materialkomponenten fungera korrekt med tanke på att du har importerat komponenten i 'app.module'-filen.

Relaterade artiklar