為什么我的 Angular Material Components 顯示錯誤？

Question

我想按照 Angular Material ( https://v5.material.angular.io/guide/getting-started ) 的教程在我的新項目中安裝 Angular Material。

當我添加 Angular Material 組件時，它沒有正確顯示。 這是我的代碼：

<a routerLink='/'>Back</a>

<form [formGroup]="registerForm">
    <mat-form-field>
        <mat-label>First Name</mat-label>
        <input matInput formControlName="firstName">
    </mat-form-field>

    <mat-form-field>
        <mat-label i18n>Last Name</mat-label>
        <input matInput formControlName="lastName">
    </mat-form-field>
</form>

這就是它的樣子：

( https://i.stack.imgur.com/fXQoS.png )

label完全不見了，風格完全不同。

Answer 1

angular v8之前，沒有外部庫集成支持。 在 angular v8 及以上版本中，您可以使用ng add命令，然后目標項目將使用所有默認配置安裝您的項目。

由於您正在處理 angular v5（我假設是 v5，因為您正在安裝 angular 材料 v5），您需要在 styles.scss 上手動添加主題 css

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

如果您使用的是 angular v8 或更高版本，請找到 angular 材料的匹配版本並使用上述命令添加項目。

# remove xx.xx.xx if you are using latest version
ng add @angular/material@xx.xx.xx