导入 MatTabChangeEvent 时出错

Question

我正在尝试使用 angular material 库。我在 package.json 中添加了对 @angular/material 的依赖，如下所示

"@angular/animations": "^5.0.0",
"@angular/cdk": "^6.0.0",
"@angular/material": "^5.2.5",

当我使用

import { MatTabChangeEvent } from '@angular/material';

编译时报错

ERROR in [at-loader] ./node_modules/@angular/material/stepper/typings/stepper.d.ts:28:5
TS2416: Property '_stepHeader' in type 'MatStepper' is not assignable to the same property in base type 'CdkStepper'.
Type 'QueryList<ElementRef>' is not assignable to type 'QueryList<FocusableOption>'.
Type 'ElementRef' is not assignable to type 'FocusableOption'.
  Property 'focus' is missing in type 'ElementRef'.

我没有添加任何与 angular material 相关的代码，除了导入行。

Answer 1

您需要确保您拥有相同版本的 Angular CDK 和 Material，以及 Angular Material 和 CDK 的 Angular 版本。

在这种情况下，将所有依赖项升级到 Angular 6:

npm install @angular/cdk @angular/material

或者：

npm update

Answer 2

在 angular 9 文件夹结构已更改

"@angular/material": "^9.2.0",

获取类型使用

import { MatTabChangeEvent } from '@angular/material/tabs';

导入 MatTabChangeEvent 时出错

Error in importing MatTabChangeEvent

angular-material

angular5

angular-cdk