我正在使用来自https://material.angular.io/components/form-field/overview的Angular材质参考和来自https://stackblitz.com/angular/kopgoqmxvbdl?file=app%2Fform-field-overview-example.html
的示例我,具有与示例中所示相同的代码。但是,它对我不起作用。我,我在asp.net代码2.0中使用angular 5模板。
在我的index.cshtml页面中,我已经添加了
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
这是输入字段不起作用的html代码
dashboard.component.html
<div class="example-container">
<mat-form-field>
<input matInput placeholder="Input">
</mat-form-field>
<mat-form-field>
<textarea matInput placeholder="Textarea"></textarea>
</mat-form-field>
<mat-form-field>
<mat-select placeholder="Select">
<mat-option value="option">Option</mat-option>
</mat-select>
</mat-form-field>
</div>
示例中的相同代码。
这是 App.share.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { RouterModule } from '@angular/router';
import 'hammerjs';
import 'angular-polyfills';
import 'web-animations-js';
import { AppComponent } from './components/app/app.component';
import { EqualValidator } from "./components/Validation/equal.validator.directive";
import { HomeComponent } from './components/home/home.component';
import { LoginComponent } from './components/usercreation/login.component';
import { MobileComponent } from './components/mobile/mobile.component';
import { SocialComponent } from './components/usercreation/social.component';
import { RegisterComponent } from './components/usercreation/signup.component';
import { DashBoardComponent } from './components/dashboard/dashboard.component';
import { NavMenuComponent } from './components/navmenu/navmenu.component';
import {
MatAutocompleteModule,
MatButtonModule,
MatButtonToggleModule,
MatCardModule,
MatCheckboxModule,
MatChipsModule,
MatDatepickerModule,
MatDialogModule,
MatExpansionModule,
MatGridListModule,
MatIconModule,
MatInputModule,
MatFormFieldModule,
MatListModule,
MatMenuModule,
MatNativeDateModule,
MatPaginatorModule,
MatProgressBarModule,
MatProgressSpinnerModule,
MatRadioModule,
MatRippleModule,
MatSelectModule,
MatSidenavModule,
MatSliderModule,
MatSlideToggleModule,
MatSnackBarModule,
MatSortModule,
MatStepperModule,
MatTableModule,
MatTabsModule,
MatToolbarModule,
MatTooltipModule
} from '@angular/material';
import { BrowserModule } from '@angular/platform-browser';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@NgModule({
declarations: [
AppComponent, RegisterComponent, EqualValidator, DashBoardComponent,
HomeComponent, NavMenuComponent,
LoginComponent,
MobileComponent,
SocialComponent
],
imports: [
CommonModule,
HttpClientModule,
FormsModule,
RouterModule.forRoot([
{ path: '', redirectTo: 'home', pathMatch: 'full' },
{ path: 'home', component: HomeComponent },
{ path: 'login', component: LoginComponent },
{ path: 'mobile', component: MobileComponent },
{ path: 'dashboard', component: DashBoardComponent },
{ path: 'signup', component: RegisterComponent },
{ path: '**', redirectTo: 'home' }
]),
BrowserModule,
BrowserAnimationsModule,
MatAutocompleteModule,
MatButtonModule,
MatButtonToggleModule,
MatCardModule,
MatCheckboxModule,
MatChipsModule,
MatStepperModule,
MatDatepickerModule,
MatDialogModule,
MatExpansionModule,
MatGridListModule,
MatIconModule,
MatInputModule,
MatFormFieldModule,
MatListModule,
MatMenuModule,
MatNativeDateModule,
MatPaginatorModule,
MatProgressBarModule,
MatProgressSpinnerModule,
MatRadioModule,
MatRippleModule,
MatSelectModule,
MatSidenavModule,
MatSliderModule,
MatSlideToggleModule,
MatSnackBarModule,
MatSortModule,
MatTableModule,
MatTabsModule,
MatToolbarModule,
MatTooltipModule
],
exports: [
MatAutocompleteModule,
MatButtonModule,
MatButtonToggleModule,
MatCardModule,
MatCheckboxModule,
MatChipsModule,
MatStepperModule,
MatDatepickerModule,
MatDialogModule,
MatExpansionModule,
MatGridListModule,
MatIconModule,
MatInputModule,
MatFormFieldModule,
MatListModule,
MatMenuModule,
MatNativeDateModule,
MatPaginatorModule,
MatProgressBarModule,
MatProgressSpinnerModule,
MatRadioModule,
MatRippleModule,
MatSelectModule,
MatSidenavModule,
MatSliderModule,
MatSlideToggleModule,
MatSnackBarModule,
MatSortModule,
MatTableModule,
MatTabsModule,
MatToolbarModule,
MatTooltipModule
]
})
export class AppModuleShared {
}
组件Ts文件
import { Component } from '@angular/core';
import { AppComponent } from "../app/app.component";
@Component({
selector: 'dashboard',
templateUrl: './dashboard.component.html'
})
export class DashBoardComponent {
private _appComponent: AppComponent;
constructor(private appComponent: AppComponent) {
this._appComponent = appComponent;
this._appComponent.menulist = true;
}
}
webpack.config.vendor.js
const treeShakableModules = [
'@angular/animations',
'@angular/common',
'@angular/compiler',
'@angular/core',
'@angular/forms',
'@angular/http',
'@angular/platform-browser',
'@angular/platform-browser-dynamic',
'@angular/router',
'zone.js',
];
const nonTreeShakableModules = [
'bootstrap',
'bootstrap/dist/css/bootstrap.css',
'@angular/material',
'@angular/material/prebuilt-themes/indigo-pink.css',
'@angular/cdk',
'es6-promise',
'es6-shim',
'event-source-polyfill',
'jquery',
];
const allModules = treeShakableModules.concat(nonTreeShakableModules);
Vendor.css
@import '~@angular/material/prebuilt-themes/indigo-pink.css';
.mdl-layout--fixed-header > .mdl-layout__header {
z-index: 6;
}
.has-drawer .mdl-layout__drawer {
padding-top: 64px;
}
.mdl-layout--fixed-drawer:not(.is-small-screen) > .mdl-layout__header {
padding-left: 240px;
margin-left: 0;
width: 100%;
}
获取错误为GET http://localhost:54236/dist/~@angular/material/prebuilt-themes/indigo-pink.css net :: ERR_ABORTED - 未加载css文件。
以下是我从代码中获得的输出
答案 0 :(得分:0)
看起来你仍然错过了那里的引用,这可能解释了为什么输入控件似乎被Angular Material破坏了。
您是否也添加了对此的引用?
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
我认为脚本文件应该与css一起使用。
您可能也想要包含此样式。
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
有关详细信息,请查看this link。
答案 1 :(得分:0)
问题是我的vendor.css和vendor.js没有刷新。所以,我需要使用
再次构建webpackwebpack --config webpack.config.vendor.js
如果没有安装webpack。请安装webpack
npm install -g webpack
在webpack.config.vendor.js内部
const treeShakableModules = [
'@angular/animations',
'@angular/common',
'@angular/compiler',
'@angular/core',
'@angular/forms',
'@angular/http',
'@angular/platform-browser',
'@angular/platform-browser-dynamic',
'@angular/router',
'zone.js',
];
const nonTreeShakableModules = [
'@angular/material',
'@angular/material/prebuilt-themes/indigo-pink.css',
'@angular/cdk',
'es6-promise',
'es6-shim',
'event-source-polyfill',
'jquery',
];