Question

https://material.angular.io/guide/getting-started

ng new testapp
cd testapp
npm install --save @angular/material @angular/cdk
npm install --save @angular/animations
ng serve

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatFormFieldModule, MatInputModule } from '@angular/material';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MatFormFieldModule,
    MatInputModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.html

<p>Test Angular Material</p>

<form>
  <mat-form-field class="example-full-width">
    <input matInput placeholder="Favorite food" value="Sushi">
  </mat-form-field>
</form>

app.component.css

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

在他们的网站上没有正常链接。

我很确定我忘记了什么，但我在他们的网站上到处都在看，甚至不知道是什么......

感谢您的帮助。

Answer 1

主题的导入通常在style.css样式表中。

Answer 2

如果问题是单击输入的材质的动画无法正常工作，则可能您未定义材质的主题：转到src文件夹中的styles.css，并像这样写行主题

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

要选择其他主题：consider Angular's theme guide。

材质角度 - 无法正常工作

2 个答案: