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

Question

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

在我的HTML 中

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

在我的页面档案中：

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

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

错误类型错误：this.bottomSheet.open不是函数在登录页面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( 。在您的login-page.module.ts文件中；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 {}

2( 。希望你有底部的sheet-overview-esample-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>