我,正在使用来自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 {
}
Component Ts File
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文件 .
这是我从代码中获得的输出
2 回答
看起来你仍然缺少那里的引用,这可能解释了为什么输入控件似乎被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 .
问题是我的vendor.css和vendor.js没有刷新 . 所以,我需要再次使用构建webpack
如果没有安装webpack . 请安装webpack
在webpack.config.vendor.js中