分类导航

程序问答发布时间：2022-06-02 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了带有材质 12，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

如何解决带有材质 12？

开发过程中遇到带有材质 12的问题如何解决？下面主要结合日常开发的经验，给出你关于带有材质 12的解决方法建议，希望对你解决带有材质 12有所启发或帮助；

我今天按照 Angular 在 https://update.angular.io/ 提供的指南更新到了 Angular 12（和 Ang Material 12）。从那时起，我收到了许多与 Angular Material 相关的错误。 Visual studio 2019 错误窗口中出现了 71 个此类错误。以下是其中一个错误的示例：

“类 'Matbutton' 错误地实现了接口 'Cancolor'。 “Matbutton”类型缺少“Cancolor”类型中的以下属性：color、defaultcolor”

这是一个类的例子

/**
 * Material design button.
 */
export declare class Matbutton extends _MatbuttonBase implements AfterVIEwInit,OnDestroy,Candisable,Cancolor,CandisableRipple,FocusabLeoption {
    private _focusMonitor;
    _animationMode: String;
    /** Whether the button is round. */
    Readonly isRoundbutton: Boolean;
    /** Whether the button is icon button. */
    Readonly isIconbutton: Boolean;
    /** Reference to the MatRipple instance of the button. */
    ripple: MatRipple;
    constructor(elementRef: ElementRef,_focusMonitor: FocusMonitor,_animationMode: String);
    ngAfterVIEwInit(): voID;
    ngOnDestroy(): voID;
    /** Focuses the button. */
    focus(origin?: FocusOrigin,options?: FocusOptions): voID;
    _getHostElement(): any;
    _isRippleDisabled(): Boolean;
    /** Gets whether the button has one of the given attributes. */
    _hasHostAttributes(...attributes: String[]): Boolean;
    static ngAccepTinputType_Disabled: Booleaninput;
    static ngAccepTinputType_disableRipple: Booleaninput;
    static ɵfac: ɵngcc0.ɵɵFactoryDeclaration<Matbutton,[null,null,{ optional: true; }]>;
    static ɵcmp: ɵngcc0.ɵɵComponentDeclaration<Matbutton,"button[mat-button],button[mat-raised-button],button[mat-icon-button],button[mat-fab],button[mat-mini-fab],button[mat-stroked-button],button[mat-flat-button]",["matbutton"],{ "Disabled": "Disabled"; "disableRipple": "disableRipple"; "color": "color"; },{},never,["*"]>;
}

所有错误都与上面的错误几乎相同，只是指向不同的类。我怀疑这与 tsconfig 设置有关，但似乎互联网上的任何地方都没有提到这一点。

请注意 Angular 应用程序的构建和运行 100% 正常。这些是显示在 IDE 上的错误。该应用程序似乎运行良好。这是我的 tsconfig 文件：

请注意，在 11.1 版上运行时未出现这些错误

tsconfig.Json

  {
      "extends": "./tsconfig.base.Json"
      //"files": [],//"references": [
      //  {
      //    "path": "./src/tsconfig.app.Json"
      //  },//  {
      //    "path": "./src/tsconfig.spec.Json"
      //  }
      //]
    }

tsconfig.base.Json

{
  "compiLeonSave": false,"compilerOptions": {
    "importHelpers": true,"outDir": "./dist/out-tsc","sourceMap": true,"module": "ES2020","declaration": false,"moduleResolution": "node","experimentalDecorators": true,"target": "es2015","typeRoots": [
      "node_modules/@types"
    ],"lib": [
      "es2018","dom"
    ]
  }

}

Tsconfig.app.Json

{
  "extends":  "../tsconfig.base.Json","compilerOptions": {
    "outDir": "../out-tsc/app","baseUrl": "./","types": [ "node" ]
  },"files": [
    "main.ts","polyfills.ts"
  ],"include": [
    "src/**/*.d.ts"
  ]
}

这是我的 package.Json 文件

{
  "name": "hizuko-web-app","version": "0.0.0","license": "MIT","scripts": {
    "ng": "ng","start": "ng serve","build": "ng build","test": "ng test","lint": "ng lint","e2e": "ng e2e","bundle-report": "webpack-bundle-analyzer dist/stats.Json","build-prod": "ng build --configuration production --aot"
  },"private": true,"dependencIEs": {
    "@angular/animations": "12.1.1","@angular/cdk": "12.1.1","@angular/cli": "12.1.1","@angular/common": "12.1.1","@angular/compiler": "12.1.1","@angular/core": "12.1.1","@angular/forms": "12.1.1","@angular/material": "12.1.1","@angular/platform-browser": "12.1.1","@angular/platform-browser-dynamic": "12.1.1","@angular/platform-server": "12.1.1","@angular/router": "12.1.1","@ngx-translate/core": "^12.1.1","@ngx-translate/http-loader": "^4.0.0","chart.Js": "2.9.3","core-Js": "3.6.2","rxJs": "6.6.2","tslib": "^2.0.0","zone.Js": "~0.11.4"
  },"devDependencIEs": {
    "@angular-builders/custom-webpack": "^8.4.1","@angular-devkit/build-angular": "~12.1.1","@angular/compiler-cli": "12.1.1","@angular/language-service": "12.1.1","@types/jasmine": "~3.6.0","@types/jasminewd2": "^2.0.8","@types/node": "^12.11.1","bootstrap": "^4.4.1","codelyzer": "^6.0.0","jasmine-core": "~3.6.0","jasmine-spec-reporter": "~5.0.0","karma": "~6.3.4","karma-Chrome-launcher": "~3.1.0","karma-cli": "~2.0.0","karma-coverage-istanbul-reporter": "~3.0.2","karma-jasmine": "~4.0.0","karma-jasmine-HTML-reporter": "^1.5.0","protractor": "~7.0.0","source-map-explorer": "^2.3.1","ts-node": "~8.5.4","tslint": "~6.1.0","typescript": "4.2","webpack-bundle-analyzer": "^3.6.0"
  }
}

这是我的环境

带有材质 12