当我尝试打开带有离子角度材料的this.bottomSheet.open时，BottomSheet不是一个函数。

Question

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

在我的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();
  }

}

问题是，当试图显示底表时，我得到以下错误：

ERROR TypeError: 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 {}

材料模块

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

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

确保在组件模块或应用程序模块中导入了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中

Answer 2

确保你有以下的东西。

1)。在您的登录-page.module.ts文件中，声明中的"BottomSheetOverviewExampleSheet“和这样的entryComponents，

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

2)。希望你有这样的底片-概览-示例-Sheet.html，

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