角度材料输入不起作用

Question

我正在使用来自 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 文件未加载。

这是我从代码中得到的输出

Answer 1

你需要改变styles.scss

请加@import "~@angular/material/prebuilt-themes/deeppurple-amber.css";

此主题在白色背景下正常工作。

Answer 2

问题是我的 vendor.css 和 vendor.js 没有刷新。所以，我需要使用

再次构建 webpack

webpack --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',
];

Answer 3

看起来您仍然错过了那里的引用，这可能解释了为什么输入控件似乎被 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。