Angular Material 样式不适用于子组件

Question

我遇到了角度材质默认样式的问题。 我有一个父仪表板组件，它的子组件名为 “HomComponent”和“RegistrationComponent”。Angular Material 的输入框和按钮在仪表板页面中工作正常，但在子组件中只能看到 HTml 按钮和输入框。 请看下面的代码。

DashBoardRouting.ts:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { DashboardComponent } from './dashboard.component';
import { home} from './home/home-routing.module';
import { regis } from './registration/registration-routing.module';

export const dashboard: Routes = [
  {
    path : 'dashboard',
    component :DashboardComponent,
    children:[
      ...home,
      ...regis
    ]
  },

];

@NgModule({
  imports: [RouterModule.forChild(dashboard)],
  exports: [RouterModule]
})
export class DashboardRoutingModule { }

HomeCompoennt.html:

<form class="example-form" >
  <mat-form-field class="example-full-width">
    <input matInput placeholder="Username">
  </mat-form-field>
  </form>

app.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule,CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { AppComponent } from './app.component';
import { DashboardComponent } from './dashboard/dashboard.component';
import { LoginComponent } from './login/login.component';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import { AppRoutingRoutingModule } from './app-routing-routing.module';
import {MatInputModule} from '@angular/material/input';
import {MatButtonModule} from '@angular/material/button';
import {MatStepperModule} from '@angular/material/stepper';
import {CdkTableModule} from '@angular/cdk/table';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { LoginModule } from './login/login.module';
import { DashboardModule } from './dashboard/dashboard.module';
import 'hammerjs';

@NgModule({
  declarations: [
    AppComponent,DashboardComponent, LoginComponent

  ],
  imports: [

    BrowserModule,BrowserAnimationsModule,AppRoutingRoutingModule,MatInputModule,MatButtonModule,
    MatStepperModule,CdkTableModule,FormsModule,ReactiveFormsModule,LoginModule,DashboardModule
  ],

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

Answer 1

你错过了MatFormFieldModule。 MatInputModule 允许原生 <input> 和 <textarea> 元素与 <mat-form-field> 一起使用，而 MatFormFieldModule 用于 <mat-form-field> 本身。

附：考虑为 Angular Material 组件使用专用模块。

import { MatFormFieldModule } from '@angular/material/form-field';

// ...

@NgModule({
  imports: [
    MatFormFieldModule,
    // ...
  ]
})
export class MaterialModule { }