我遇到角度材质默认样式的问题。 我有一个父仪表板组件,其中包含名为的子组件 “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 { }
答案 0 :(得分:0)
你错过了MatFormFieldModule
。 MatInputModule
允许原始<input>
和<textarea>
元素与<mat-form-field>
一起使用,而MatFormFieldModule
则适用于<mat-form-field>
本身。
P.S。考虑为Angular Material组件使用专用模块。
import { MatFormFieldModule } from '@angular/material/form-field';
// ...
@NgModule({
imports: [
MatFormFieldModule,
// ...
]
})
export class MaterialModule { }