NullInjectorError：没有 MatBottomSheetRef 提供程序

Question

在这个 stackblitz 中，我收到以下错误（即使MatBottomSheetModule是导入的）：

        ERROR
        Error: StaticInjectorError(AppModule)[CountryCodeSelectComponent -> MatBottomSheetRef]:
        StaticInjectorError(Platform: core)[CountryCodeSelectComponent -> MatBottomSheetRef]:
        NullInjectorError: No provider for MatBottomSheetRef!

想法？

Angular / 组件功能请求

请为此投票。我要求使用例对称 WRT 我们如何使用其他类似的 Angular 组件/服务。

https://github.com/angular/components/issues/17011

Answer 1

您需要为您缺少的底部工作表提供程序。

对material.module.ts 进行这些更改

import {MatBottomSheetRef, MAT_BOTTOM_SHEET_DATA} from '@angular/material/bottom-sheet';

@NgModule({
  exports: [...]
  providers: [
    { provide: MatBottomSheetRef, useValue: {} },
    { provide: MAT_BOTTOM_SHEET_DATA, useValue: {} }
  ],
})

这是用于 webpack 的 Treeshaking 的推荐方法，以获得更高性能和最小化的包：

在文件中：country-code-select.component.ts

// Removed -1
// import { MatBottomSheetRef } from '@angular/material'; 


//Added +1
import { MatBottomSheetRef} from '@angular/material/bottom-sheet';  

Stackblitz 供您参考

https://stackblitz.com/edit/angular-material-baseline2-country-code-select-6hisdk

你已经准备好了。干杯!