Question

只有在单击后才加载“角材质” UI。请检查前后的屏幕截图

我的包裹没有单独的material.ts。我在app.module.ts中都有所有导入

我所有导入的app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormBuilder } from '@angular/forms';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { NavComponent } from './nav/nav.component';
import { SignupComponent } from './signup/signup.component';
import { AccountComponent } from './account/account.component';
import { InfoComponent } from './info/info.component';
import { MatToolbarModule, MatIconModule, MatSelectModule, MatCardModule, MatListModule, MatButtonModule, MatInputModule } from '@angular/material';
import { HomeComponent } from './home/home.component';
import {MatFormFieldModule} from '@angular/material/form-field';
import {MatRadioModule} from '@angular/material/radio';
import {MatDatepickerModule} from '@angular/material/datepicker';
import {MatNativeDateModule} from '@angular/material/core';


@NgModule({
  declarations: [
    AppComponent,
    NavComponent,
    SignupComponent,
    AccountComponent,
    InfoComponent,
    HomeComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    MatButtonModule,
    MatToolbarModule,
    MatIconModule,
    MatSelectModule,
    MatListModule,
    MatCardModule,
    MatFormFieldModule,
    MatInputModule,
    MatRadioModule,
    MatDatepickerModule,
    MatNativeDateModule

  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

预期：将所有UI一起加载。当前：最初只有一个组件正在加载，其余的只有在单击之后才能加载。

代码：

<mat-card class="login">
        <div>
          <img class = "lock" src = "assets/images/lock.png">
                   <mat-form-field class = "inputfields" appearance="outline">
                                        <mat-label>Enter Your Username</mat-label>
                                        <input matInput placeholder="User Name">       
                                </mat-form-field>
                                <br>
                                <mat-form-field class = "inputfields" appearance="outline">
                                        <mat-label>Enter Your Password</mat-label>
                                        <input type = "password" matInput placeholder="Password">      
                                </mat-form-field>
                                </div>
                                <button class = "login-btn" mat-flat-button color="accent" [routerLink]="'/account'">Log In</button>
                                <br>
                                <p style="margin-left: 40px">Become a Member?<button class = "signup-btn" mat-flat-button color="accent" [routerLink]="'/signup'">Sign Up</button></p>

                        </mat-card>

角度材料代码问题。用户界面仅在单击材料组件后才加载

0 个答案: