Question

我正在尝试创建一个登录页面，但是成角度的按钮和输入没有像https://material.angular.io/components/button/overview和https://material.angular.io/components/input/overview上的动画

我的代码位于https://stackblitz.com/github/vibhorgoyal18/atest-blog上到登录页面的路径是/ login

请帮助我解决这个问题。

此外，当我单击“注册”并返回到loogin时，它还会显示滚动条一秒钟。请也提供建议

login.html

     <div class="container align-content-center py-2">
      <div class="row">
        <div class="col-md-8 mx-auto">
          <mat-tab-group disableRipple>
            <mat-tab label="Login">
              <mat-card>
                <div class="row">
                  <div class="col-md-12 align-content-center py-3">
                    <mat-form-field>
                      <input matInput placeholder="username">
                    </mat-form-field>
                  </div>
                  <div class="col-md-12 align-content-center py-3">
                    <mat-form-field floatLabel="always">
                      <input matInput>
                    </mat-form-field>
                  </div>
                  <div class="col-md-12 align-content-center py-3">
                    <button mat-button>Login</button>
                  </div>
                </div>
              </mat-card>
            </mat-tab>
            <mat-tab label="Sign Up">
              <mat-card><div class="row">
                <div class="col-md-12 align-content-center py-3">
                  <mat-form-field>
                    <input matInput placeholder="username">
                  </mat-form-field>
                </div>
                <div class="col-md-12 align-content-center py-3">
                  <mat-form-field>
                    <input matInput placeholder="email">
                  </mat-form-field>
                </div>
                <div class="col-md-12 align-content-center py-3">
                  <mat-form-field>
                    <input matInput placeholder="password">
                  </mat-form-field>
                </div>
                <div class="col-md-12 align-content-center py-3">
                  <button mat-button>Login</button>
                </div>
              </div></mat-card>
            </mat-tab>
          </mat-tab-group>
        </div>
      </div>
    </div>

和app.module.ts

import {BrowserModule} from '@angular/platform-browser';
    import {NgModule} from '@angular/core';

    import {AppComponent} from './app.component';
    import {HeaderComponent} from './modules/main/header/header.component';
    import {LoginComponent} from './modules/login/login.component';
    import {AppRoutingModule} from './app-routing.module';
    import {
      MatButtonModule,
      MatCardModule,
      MatDialogModule,
      MatFormFieldModule, MatInputModule,
      MatTabsModule
    } from '@angular/material';
    import {HttpClientModule} from '@angular/common/http';
    import {BrowserAnimationsModule} from '@angular/platform-browser/animations';

    @NgModule({
      declarations: [
        AppComponent,
        HeaderComponent,
        LoginComponent,
      ],
      imports: [
        BrowserModule,
        AppRoutingModule,
        HttpClientModule,
        MatDialogModule,
        MatTabsModule,
        BrowserAnimationsModule,
        MatCardModule,
        MatFormFieldModule,
        MatInputModule,
        MatButtonModule
      ],
      providers: [],
      bootstrap: [AppComponent]
    })
    export class AppModule {
    }

Answer 1

确保导入matButtonModule：

import {MatButtonModule} from '@angular/material/button';

Answer 2

转到styles.css 并将其添加到顶部

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

角输入/按钮未设置动画

2 个答案: