我已将 Angular Material 包含在我的 Angular 元素项目中。我已经包含了文档建议的所有参考资料，但是当我构建看起来有角度时，根本不包含材质主题。
这是观看我的意思的链接：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 {}
应用程序模块
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>
我也面临着同样的问题。 尝试在 app.component.css 上添加这一行（适用于 indigo 主题）
@import "~@angular/material/prebuilt-themes/indigo-pink.css";
然后在您的组件上使用无封装，如下所示：
@Component({
...,
encapsulation: ViewEncapsulation.None
})
如果有人对解决方案感兴趣。我的问题是由 main.ts 文件中的 ngZone: 'noop' 引起的。它禁用更改检测。
所以改变这个
platformBrowserDynamic() .bootstrapModule(AppModule, { ngZone: 'noop' }) .catch(err => console.error(err)); 对此
platformBrowserDynamic() .bootstrapModule（应用程序模块） .catch((err) => console.error(err)); 解决了我的 Angular Material Elements 问题。
我对基于 角度元素的微前端也遇到了同样的问题，并在根组件中设置了
ViewEncapsulation.ShadowDom为什么不起作用
我对代码的深入研究表明
<html>由于shadow DOM是主机页面的CSS和微前端/Web组件的CSS之间的边界，因此shadow-root内部的所有内容都无法访问shadow-root外部的CSS（为标签中的标签定义一些内容）影子根内的标签不起作用）。
我的解决方案
我在应用程序的根组件中添加了一个 div，它包含了所有内容。
<div id="mfe-container">
...everything that was in the app.component.html before...
</div>
我没有将主题包含在
html@use '@angular/material' as mat;
// my custom theme file
@use './m3-theme';
// The core mixin must be included exactly once for your application, even if you define multiple themes.
// Including the core mixin multiple times will result in duplicate CSS in your application.
// https://material.angular.io/guide/theming#the-core-mixin
@include mat.core();
#mfe-container {
@include mat.all-component-themes(m3-theme.$light-theme);
}
您已导入此：
import {MatFormFieldModule} from '@angular/material';
但是Material API文档指定了这样的导入：
import {MatFormFieldModule} from '@angular/material/form-field';
在 stackBlitz 上： https://stackblitz.com/edit/angular-3l12yn