angular-material - 当我尝试在 ionic 中打开带有 Angular Material 的 BottomSheet 时，this.bottomSheet.open 不是一个函数

Question

我有基于角度 Material 文档的以下代码:

在我的 HTML

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

并且，在我的页面 ts 存档中:

import { Component, OnInit } from '@angular/core';
import {MatBottomSheet, MatBottomSheetRef} from '@angular/material/bottom-sheet';

@Component({
  selector: 'app-login',
  templateUrl: './login.page.html',
  styleUrls: ['./login.page.scss'],
})
export class LoginPage implements OnInit {

  constructor(private bottomSheet: MatBottomSheet) {}

  openBottomSheet ()
  {
    this.bottomSheet.open(BottomSheetOverviewExampleSheet)
  }

  ngOnInit() {
  }
}

@Component({
  selector: 'bottom-sheet-overview-example-sheet',
  templateUrl: 'bottom-sheet-overview-example-sheet.html',
})
export class BottomSheetOverviewExampleSheet {
  constructor(private bottomSheetRef: MatBottomSheetRef<BottomSheetOverviewExampleSheet>) {}

  openLink(event: MouseEvent): void {
    this.bottomSheetRef.dismiss();
    event.preventDefault();
  }

}

问题是，当试图显示 Bottom Sheet 时，我收到以下错误:

错误类型错误:this.bottomSheet.open 不是函数
在 LoginPage.openBottomSheet

在我的页面组件中，我有:

import { LoginPageRoutingModule } from './login-routing.module';
import { LoginPage } 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]
})
export class LoginPageModule {}

Material 模块

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 { }

Answer 1

您必须导入包含此功能的 Material 设计模块。

确保您拥有 import {MatBottomSheetModule} from '@angular/material/bottom-sheet';在您的组件模块或应用程序模块中导入。

更新:

代替

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