自定义Angular库中丢失了Angular Material样式

问题描述

我开始创建自己的Angular库，但是Angular Material遇到了很多错误。我可以修复大多数问题，但是最令人不安的是，由于我有限的经验，无法解决的问题是Angular Material组件的所有样式基本上都无效了。

在this short video (0:03)中，您可以看到以下代码。

<certi-header [menuItems]="menuItems"></certi-header>

<certi-button text="Hello,I'm a button!"></certi-button>

<button
  mat-raised-button
  [autofocus]="autofocus"
  [disabled]="disabled"
  [name]="name"
  [type]="type"
  [value]="value"
>
  {{ text }}
</button>

<ng-container *ngIf="mobile; else notMobile"><button mat-icon-button [matMenuTriggerFor]="menu">
    <mat-icon>menu</mat-icon>
  </button>
  <mat-menu #menu="matMenu">
    <certi-menu-item *ngFor="let menuItem of menuItems" [menuItem]="menuItem"></certi-menu-item>
  </mat-menu>
</ng-container>

<ng-template #notMobile>
    <ng-container *ngIf="menuItems.length">
            <certi-logo></certi-logo>
            <ng-container *ngFor="let menuItem of menuItems">
                <certi-menu-item [menuItem]="menuItem"></certi-menu-item>
            </ng-container>
    </ng-container>
</ng-template>

出于某种原因，我无法理解Angular Material样式，因为它看起来像this mat-rasied-button和this menu。

据我所知，我确实正确导出了组件

/*
 * Public API Surface of certi-library
 */
export * from './lib/components/certi-button/certi-button.component';
export * from './lib/components/certi-header/certi-header.component';
export * from './lib/components/certi-menu/certi-menu.component';
export * from './lib/components/certi-menu-item/certi-menu-item.component';

export * from './lib/angular-material-module.module'
export * from './lib/certi-library.module';

import { NgModule } from '@angular/core';
//Angular defaults
import { CommonModule } from '@angular/common';

//Library components
import { CertiButtonComponent } from './components/certi-button/certi-button.component';
import { CertiHeaderComponent } from './components/certi-header/certi-header.component';
import { CertiMenuItemComponent } from './components/certi-menu-item/certi-menu-item.component';
import { CertiMenuComponent } from './components/certi-menu/certi-menu.component';
import { CertiLogoComponent } from './components/certi-logo/certi-logo.component';

//Angular Material
import { AngularMaterialModule } from './angular-material-module.module';

//Flex Layout
import { FlexLayoutModule } from '@angular/flex-layout';

//Browser animations
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

const components = [
  CertiButtonComponent,CertiHeaderComponent,CertiMenuItemComponent,CertiMenuComponent,CertiLogoComponent
];

const modules = [
  AngularMaterialModule,FlexLayoutModule,BrowserAnimationsModule
];

@NgModule({
  declarations: [
    ...components
  ],imports: [
    CommonModule,...modules
  ],exports: [
    ...components,...modules
  ]
})
export class CertiLibraryModule { }

据我所知，我还导入了AngularMaterialModule修正

import { NgModule } from "@angular/core";

//Angular Material modules
import { MatAutocompleteModule } from "@angular/material/autocomplete";
import { MatBadgeModule } from "@angular/material/badge";
import { MatBottomSheetModule } from "@angular/material/bottom-sheet";
import { MatButtonModule } from "@angular/material/button";
import { MatButtonToggleModule } from "@angular/material/button-toggle";
import { MatCardModule } from "@angular/material/card";
import { MatCheckboxModule } from "@angular/material/checkbox";
import { MatChipsModule } from "@angular/material/chips";
import { MatDatepickerModule } from "@angular/material/datepicker";
import { MatDialogModule } from "@angular/material/dialog";
import { MatDividerModule } from "@angular/material/divider";
import { MatExpansionModule } from "@angular/material/expansion";
import { MatFormFieldModule } from "@angular/material/form-field";
import { MatGridListModule } from "@angular/material/grid-list";
import { MatIconModule } from "@angular/material/icon";
import { MatInputModule } from "@angular/material/input";
import { MatListModule } from "@angular/material/list";
import { MatMenuModule } from "@angular/material/menu";
import { MatPaginatorModule } from "@angular/material/paginator";
import { MatProgressBarModule } from "@angular/material/progress-bar";
import { MatProgressSpinnerModule } from "@angular/material/progress-spinner";
import { MatRadioModule } from "@angular/material/radio";
import { MatRippleModule } from "@angular/material/core";
import { MatSelectModule } from "@angular/material/select";
import { MatSidenavModule } from "@angular/material/sidenav";
import { MatSlideToggleModule } from "@angular/material/slide-toggle";
import { MatSliderModule } from "@angular/material/slider";
import { MatSnackBarModule } from "@angular/material/snack-bar";
import { MatSortModule } from "@angular/material/sort";
import { MatStepperModule } from "@angular/material/stepper";
import { MatTableModule } from "@angular/material/table";
import { MatTabsModule } from "@angular/material/tabs";
import { MatToolbarModule } from "@angular/material/toolbar";
import { MatTooltipModule } from "@angular/material/tooltip";
import { MatTreeModule } from "@angular/material/tree";

const components: any[] = [
  MatAutocompleteModule,//https://material.angular.io/components/autocomplete/api
  MatBadgeModule,//https://material.angular.io/components/badge/api
  MatBottomSheetModule,//https://material.angular.io/components/bottom-sheet/api
  MatButtonModule,//https://material.angular.io/components/button/overview
  MatButtonToggleModule,//https://material.angular.io/components/button-toggle/api
  MatCardModule,//https://material.angular.io/components/card/api
  MatCheckboxModule,//https://material.angular.io/components/checkbox/api
  MatChipsModule,//https://material.angular.io/components/chips/api
  MatDatepickerModule,//https://material.angular.io/components/datepicker/api
  MatDialogModule,//https://material.angular.io/components/dialog/api
  MatDividerModule,//https://material.angular.io/components/divider/api
  MatExpansionModule,//https://material.angular.io/components/expansion/api
  MatFormFieldModule,//https://material.angular.io/components/form-field/api
  MatGridListModule,//https://material.angular.io/components/grid-list/api
  MatIconModule,//https://material.angular.io/components/icon/api
  MatInputModule,//https://material.angular.io/components/input/overview
  MatListModule,//https://material.angular.io/components/list/api
  MatMenuModule,//https://material.angular.io/components/menu/api
  MatPaginatorModule,//https://material.angular.io/components/paginator/api
  MatProgressBarModule,//https://material.angular.io/components/progress-bar/api
  MatProgressSpinnerModule,//https://material.angular.io/components/progress-spinner/api
  MatRadioModule,//https://material.angular.io/components/radio/api
  MatRippleModule,//https://material.angular.io/components/ripple/api
  MatSelectModule,//https://material.angular.io/components/select/api
  MatSidenavModule,//https://material.angular.io/components/sidenav/api
  MatSlideToggleModule,//https://material.angular.io/components/slide-toggle/api
  MatSliderModule,//https://material.angular.io/components/slider/api
  MatSnackBarModule,//https://material.angular.io/components/snack-bar/api
  MatSortModule,//https://material.angular.io/components/sort/api
  MatStepperModule,//https://material.angular.io/components/stepper/api
  MatTableModule,//https://material.angular.io/components/table/api
  MatTabsModule,//https://material.angular.io/components/tabs/api
  MatToolbarModule,//https://material.angular.io/components/toolbar/api
  MatTooltipModule,//https://material.angular.io/components/tooltip/api
  MatTreeModule,//https://material.angular.io/components/tree/api
];

@NgModule({
  imports: components,exports: components,})
export class AngularMaterialModule {}

Angular材质版本等于Angular cdk版本。我也没有任何错误，这只是我库中的视觉错误。有什么想法吗？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）