Question

我已在我的角度元素项目中包含了Angular Material。我已经包含了文档中所建议的所有参考，但是当我构建时似乎有点棱角，则根本不包含材料主题。

这是观看我的意思的链接：https://next.plnkr.co/edit/3JIbOfnyKiefS31N?open=lib%2Fscript.js

用于包装所有组件的材料模块

import {NgModule} from '@angular/core';
import {MatIconModule} from '@angular/material/icon';
import {MatInputModule} from '@angular/material/input';
import {MatSelectModule} from '@angular/material/select';
import {MatFormFieldModule} from '@angular/material';

@NgModule({
  exports: [
    MatSelectModule,
    MatIconModule,
    MatInputModule,
    MatFormFieldModule,
  ]
})
export class MaterialModule {}

AppModule

import { BrowserModule } from '@angular/platform-browser';
import {Injector, NgModule} from '@angular/core';

import {GalleryComponent} from './gallery/gallery.component';
import {createCustomElement} from '@angular/elements';

import {ImageService} from './gallery/image.service';
import { ImageComponent } from './gallery/image/image.component';
import { ImageDetailsComponent } from './gallery/image-details/image-details.component';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {MaterialModule} from './material.module';

@NgModule({
  declarations: [
    GalleryComponent,
    ImageComponent,
    ImageDetailsComponent
  ],
  imports: [
    MaterialModule,
    BrowserAnimationsModule,
    BrowserModule
  ],
  entryComponents: [GalleryComponent],
  providers: [ImageService],
})
export class AppModule {
  constructor(private injector: Injector) {}

  ngDoBootstrap() {
    const custom = createCustomElement(GalleryComponent, { injector: this.injector });
    customElements.define('slim-gallery', custom);
  }
}

样式

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

body {
  font-family: Roboto, Arial, sans-serif;
  margin: 0;
}

.basic-container {
  padding: 30px;
}

.version-info {
  font-size: 8pt;
  float: right;
}

组件模板html

<mat-form-field>
  <mat-label>Favorite food</mat-label>
  <mat-select>
    <mat-option *ngFor="let food of foods" [value]="food.value">
      {{food.viewValue}}
    </mat-option>
  </mat-select>
</mat-form-field>

Answer 1

您已导入：

import {MatFormFieldModule} from '@angular/material';

但是Material API documentation这样指定导入：

import {MatFormFieldModule} from '@angular/material/form-field';

在堆栈上 https://stackblitz.com/edit/angular-3l12yn

Answer 2

我面临着同样的问题。尝试在您的app.component.css上添加这一行（这是靛蓝主题）

@import "~@angular/material/prebuilt-themes/indigo-pink.css";

然后在组件ts上不使用封装，如下所示：

@Component({
 ...,
 encapsulation: ViewEncapsulation.None
})

Angular Elements没有正确包含Material Theme CSS

2 个答案: