Angular material 当我尝试在ionic中打开带有角度材质的底部板材时，this.bottomSheet.open不是一个函数

我有以下基于角度材质文档的代码：

在我的HTML中

 <button mat-raised-button (click)="openBottomSheet()">Abrir BottomSheet</button>

物料模块

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import {
  MatTableModule,
  MatStepperModule,
  MatButtonModule,
  MatFormFieldModule,
  MatInputModule,
  MatOptionModule,
  MatSelectModule,
  MatIconModule,
  MatPaginatorModule,
  MatSortModule
} from "@angular/material";
import { MatCheckboxModule } from '@angular/material/checkbox';
import {MatBottomSheetRef, MatBottomSheet} from '@angular/material/bottom-sheet';




@NgModule({
  declarations: [],
  providers: [
    { provide: MatBottomSheetRef, useValue: {} },
    { provide: MatBottomSheet, useValue: {} },
  ],
  imports: [
    CommonModule,
  ],
  exports: [
    MatTableModule,
    MatStepperModule,
    MatButtonModule,
    MatFormFieldModule,
    MatInputModule,
    MatIconModule,
    MatOptionModule,
    MatSelectModule,
    MatPaginatorModule,
    MatSortModule,
    MatCheckboxModule
  ]
})
export class MaterialModule { }

---

必须导入包含此功能的“材质设计”模块

确保已从“@angular/material/bottomsheet”导入{MatBottomSheetModule}” 已导入组件模块或应用程序模块

更新：

而不是

import {
  MatTableModule,
  MatStepperModule,
  MatButtonModule,
  MatFormFieldModule,
  MatInputModule,
  MatOptionModule,
  MatSelectModule,
  MatIconModule,
  MatPaginatorModule,
  MatSortModule
} from "@angular/material";

试试这个

import {MatBottomSheetRef, MatBottomSheet, MatBottomSheetModule} from '@angular/material/bottom-sheet';
import {MatCheckboxModule} from "@angular/material/checkbox";
import {MatFormFieldModule} from "@angular/material/form-field";
import {MatOptionModule} from "@angular/material/core";
import {MatSortModule} from "@angular/material/sort";
import {MatTableModule} from "@angular/material/table";
import {MatSelectModule} from "@angular/material/select";
import {MatIconModule} from "@angular/material/icon";
import {MatPaginatorModule} from "@angular/material/paginator";
import {MatStepperModule} from "@angular/material/stepper";
import {MatInputModule} from "@angular/material/input";
import {MatButtonModule} from "@angular/material/button";

---

在

MaterialModule

中，确保您有以下内容

1） 。在login-page.module.ts文件中，声明和entryComponents中的“BottomSheetOverviewExampleSheet” 像这样,

import { LoginPageRoutingModule } from './login-routing.module';
import { LoginPage, BottomSheetOverviewExampleSheet } from './login.page';
import { MaterialModule } from '../material.module';
import { MatBottomSheetModule } from '@angular/material/bottom-sheet';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    LoginPageRoutingModule,
    MaterialModule,
    MatBottomSheetModule

  ],
  declarations: [LoginPage, BottomSheetOverviewExampleSheet],
  entryComponents: [BottomSheetOverviewExampleSheet],
})
export class LoginPageModule {}

<mat-nav-list>
  <a mat-list-item (click)="openLink($event)">
    <span mat-line>
      <!--Your message To Show -->
       Test Message
    </span>
  </a>
</mat-nav-list>

2） 。希望您有bottom-sheet-overview-example-sheet.html 像这样,

import { LoginPageRoutingModule } from './login-routing.module';
import { LoginPage, BottomSheetOverviewExampleSheet } from './login.page';
import { MaterialModule } from '../material.module';
import { MatBottomSheetModule } from '@angular/material/bottom-sheet';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    LoginPageRoutingModule,
    MaterialModule,
    MatBottomSheetModule

  ],
  declarations: [LoginPage, BottomSheetOverviewExampleSheet],
  entryComponents: [BottomSheetOverviewExampleSheet],
})
export class LoginPageModule {}

<mat-nav-list>
  <a mat-list-item (click)="openLink($event)">
    <span mat-line>
      <!--Your message To Show -->
       Test Message
    </span>
  </a>
</mat-nav-list>

测试消息

查看他们的stackblitz，您是否也可以显示自定义

MaterialModule

的代码？我认为问题在于如何从

MaterialModule

中的“@angular/material”导入

。您应该根据需要在
MaterialModule
中导入每个单独的模块，包括
MatBottomSheetModule
。我已经更新了我的答案供你参考。我建议建立一个stackblitz来复制你的源代码环境，因为这个问题似乎比表面上看起来更严重。嗨！！，我试图创建环境，但未能实现，但我将项目上载到此存储库