Angular Material由于某种原因没有样式

时间：2018-11-04 17:01:18

标签： asp.net-mvc angular typescript angular-material

我在MVC应用程序中添加了角形材料。当我加载页面时，我没有看到任何错误，但是由于某种原因也没有设置样式。我在package.json文件中添加了必要的依赖关系，在Layout.cshtml中添加了指向CSS主题的链接，在systems.config.js中添加了必要的映射。使用所有物料模块创建一个单独的material.module.ts。从app.module.ts引用了它。从我的site.css文件导入了CSS。添加了材料内容，但仍然看不到任何样式。我想念什么？

这是我的package.json文件

"dependencies": {
    "@angular/animations": "^5.2.11",
    "@angular/cdk": "^5.2.5",
    "@angular/common": "~5.0.2",
    "@angular/compiler": "~5.0.2",
    "@angular/core": "~5.0.2",
    "@angular/forms": "~5.0.2",
    "@angular/http": "~5.0.2",
    "@angular/material": "^5.2.5",
    "@angular/platform-browser": "~5.0.2",
    "@angular/platform-browser-dynamic": "~5.0.2",
    "@angular/router": "~5.0.2",
    "angular-in-memory-web-api": "~0.3.0",
    "angular-material": "^1.1.10",
    "core-js": "^2.4.1",
    "hammerjs": "^2.0.8",
    "rxjs": "^5.4.2",
    "systemjs": "0.19.40",
    "typescript": "^3.1.6",
    "typings": "^2.1.1",
    "zone.js": "^0.8.4"
  }

Layout.cshtml具有指向

的链接 
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

systems.config.js 

 map: {
            // our app is within the app folder
            'app': 'app',

            // angular bundles
            '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
            '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
            '@angular/common/http': 'npm:@angular/common/bundles/common-http.umd.js',
            'tslib': 'npm:tslib/tslib.js',

            '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
            '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
            '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
            '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
            '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
            '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',

            '@angular/animations': 'npm:@angular/animations/bundles/animations.umd.js',
            '@angular/animations/browser': 'npm:@angular/animations/bundles/animations-browser.umd.js',
            '@angular/platform-browser/animations': 'npm:@angular/platform-browser/bundles/platform-browser-animations.umd.js',
            '@angular/material': 'npm:@angular/material/bundles/material.umd.js',

            '@angular/cdk': 'npm:@angular/cdk/bundles/cdk.umd.js',
            '@angular/cdk/a11y': 'npm:@angular/cdk/bundles/cdk-a11y.umd.js',
            '@angular/cdk/bidi': 'npm:@angular/cdk/bundles/cdk-bidi.umd.js',
            '@angular/cdk/coercion': 'npm:@angular/cdk/bundles/cdk-coercion.umd.js',
            '@angular/cdk/collections': 'npm:@angular/cdk/bundles/cdk-collections.umd.js',
            '@angular/cdk/keycodes': 'npm:@angular/cdk/bundles/cdk-keycodes.umd.js',
            '@angular/cdk/observers': 'npm:@angular/cdk/bundles/cdk-observers.umd.js',
            '@angular/cdk/overlay': 'npm:@angular/cdk/bundles/cdk-overlay.umd.js',
            '@angular/cdk/platform': 'npm:@angular/cdk/bundles/cdk-platform.umd.js',
            '@angular/cdk/portal': 'npm:@angular/cdk/bundles/cdk-portal.umd.js',
            '@angular/cdk/rxjs': 'npm:@angular/cdk/bundles/cdk-rxjs.umd.js',
            '@angular/cdk/table': 'npm:@angular/cdk/bundles/cdk-table.umd.js',
            '@angular/cdk/scrolling': 'npm:@angular/cdk/bundles/cdk-scrolling.umd.js',

            '@angular/cdk/accordion': 'npm:@angular/cdk/bundles/cdk-accordion.umd.js',
            '@angular/cdk/layout': 'npm:@angular/cdk/bundles/cdk-layout.umd.js',
            '@angular/cdk/stepper': 'npm:@angular/cdk/bundles/cdk-stepper.umd.js',    

            'hammerjs': 'npm:hammerjs',
            // other libraries
            'rxjs': 'npm:rxjs',
            'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js'

这是我的material.module.ts 

import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

import { A11yModule } from '@angular/cdk/a11y';
import { BidiModule } from '@angular/cdk/bidi';
import { ObserversModule } from '@angular/cdk/observers';
import { OverlayModule } from '@angular/cdk/overlay';
import { PlatformModule } from '@angular/cdk/platform';
import { PortalModule } from '@angular/cdk/portal';
import { ScrollDispatchModule } from '@angular/cdk/scrolling';
import { CdkStepperModule } from '@angular/cdk/stepper';
import { CdkTableModule } from '@angular/cdk/table';

import {
    MatAutocompleteModule,
    MatButtonModule,
    MatButtonToggleModule,
    MatCardModule,
    MatCheckboxModule,
    MatChipsModule,
    MatDatepickerModule,
    MatDialogModule,
    MatDividerModule,
    MatExpansionModule,
    MatFormFieldModule,
    MatGridListModule,
    MatIconModule,
    MatInputModule,
    MatListModule,
    MatMenuModule,
    MatNativeDateModule,
    MatPaginatorModule,
    MatProgressBarModule,
    MatProgressSpinnerModule,
    MatRadioModule,
    MatRippleModule,
    MatSelectModule,
    MatSidenavModule,
    MatSliderModule,
    MatSlideToggleModule,
    MatSnackBarModule,
    MatSortModule,
    MatStepperModule,
    MatTableModule,
    MatTabsModule,
    MatToolbarModule,
    MatTooltipModule
} from '@angular/material';

@NgModule({
  imports: [
      MatAutocompleteModule,
      MatButtonModule,
      MatButtonToggleModule,
      MatCardModule,
      MatCheckboxModule,
      MatChipsModule,
      MatDatepickerModule,
      MatDialogModule,
      MatDividerModule,
      MatExpansionModule,
      MatFormFieldModule,
      MatGridListModule,
      MatIconModule,
      MatInputModule,
      MatListModule,
      MatMenuModule,
      MatNativeDateModule,
      MatPaginatorModule,
      MatProgressBarModule,
      MatProgressSpinnerModule,
      MatRadioModule,
      MatRippleModule,
      MatSelectModule,
      MatSidenavModule,
      MatSliderModule,
      MatSlideToggleModule,
      MatSnackBarModule,
      MatSortModule,
      MatStepperModule,
      MatTableModule,
      MatTabsModule,
      MatToolbarModule,
      MatTooltipModule
  ],
  exports: [
      MatAutocompleteModule,
      MatButtonModule,
      MatButtonToggleModule,
      MatCardModule,
      MatCheckboxModule,
      MatChipsModule,
      MatDatepickerModule,
      MatDialogModule,
      MatDividerModule,
      MatExpansionModule,
      MatFormFieldModule,
      MatGridListModule,
      MatIconModule,
      MatInputModule,
      MatListModule,
      MatMenuModule,
      MatNativeDateModule,
      MatPaginatorModule,
      MatProgressBarModule,
      MatProgressSpinnerModule,
      MatRadioModule,
      MatRippleModule,
      MatSelectModule,
      MatSidenavModule,
      MatSliderModule,
      MatSlideToggleModule,
      MatSnackBarModule,
      MatSortModule,
      MatStepperModule,
      MatTableModule,
      MatTabsModule,
      MatToolbarModule,
      MatTooltipModule
  ]
})
export class MaterialModule {}

app.module.ts 

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpModule } from '@angular/http';
import { FormsModule } from '@angular/forms';

import { AppComponent } from "./app.component";
import { AppRoutingModule } from "./app-routing.module";

import { MaterialModule } from './material.module';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { CommunityListComponent } from "./community/community-list.component";
import { CommunityService } from "./community/community.service";
import { CommunityTypeService } from "./communityType/communityType.service";
import { CommunityDetailComponent } from "./community/community-detail.component";
import { LocationService } from "./location/location.service";

@NgModule({
    imports: [BrowserModule, AppRoutingModule, HttpModule, FormsModule, MaterialModule, BrowserAnimationsModule],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
    providers: []
})
export class AppModule { }

和site.css具有对该主题的引用

@import '/node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css';

这是我页面的内容。 

<mat-expansion-panel>
        <mat-expansion-panel-header>
            <mat-panel-title>
                This is the expansion title
            </mat-panel-title>
            <mat-panel-description>
                This is a summary of the content
            </mat-panel-description>
        </mat-expansion-panel-header>

        <p>This is the primary content of the panel.</p>

    </mat-expansion-panel>

    <span class="done">
        <button mat-fab>
            <mat-icon>check circle</mat-icon>
        </button>
    </span>

我想念什么？

1 个答案:

答案 0 :(得分：0)

来自docs：

  

如果您使用的是Angular CLI，这就像在styles.css文件中包含一行一样简单：

     

@import '@angular/material/prebuilt-themes/deeppurple-amber.css';

     

或者，您可以直接直接引用文件。看起来像这样：

     

<link href="node_modules/@angular/material/prebuilt-themes/indigo-pink.css" rel="stylesheet">

     

实际路径将取决于您的服务器设置。

     

最后，如果您的应用内容未放置在mat-sidenav-container元素内部，则您需要将 mat-app-background类添加到包装器中元素（例如主体）。这样可以确保将正确的主题背景应用于您的页面。

因此，请确保正确导入主题样式表，并将mat-app-background类放入包装元素（正文或其他）。

相关问题
最新问题