this.bottomSheet.open не работает, когда я пытаюсь открыть BottomSheet с Angular Material in ionic

Question

У меня есть следующий код, основанный на документации angular материала:

В моем 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();
  }

}

Проблема в том, что при попытке показать нижнюю таблицу я получаю следующую ошибку:

ОШИБКА 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