angular - Importerade klassens statiska fält är odefinierade

Jag försöker lista ut skillnaden mellan statiska fält och metodbeteende i klasser i TypeScript och Angular. Hjälp skulle uppskattas mycket :)

Jag har exporterat en klass med statiska fält och metoder i appens src, när jag importerar den och försöker använda de statiska fälten är de odefinierade, om jag kallar på statiska metoder fungerar de.

src/app/core/colors.ts

   export class SystemColors {

    static  _gray: {
        default: '#ABAFBE',
        darker: ['#7C8298', '#606473'],
        lighter: ['#C8D1DA', '#E2E3ED', '#F5F6FA']
    };


    public static get gray() {
        return {
            default: '#ABAFBE',
            darker: ['#7C8298', '#606473'],
            lighter: ['#C8D1DA', '#E2E3ED', '#F5F6FA']
        };
    }
}

src/app/app.component.ts

import {SystemColors} from '...';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit, AfterViewInit {

    constructor() {}

    ngOnInit() {
        console.log(1, SystemColors.gray); // static get method has value
        console.log(2, SystemColors._gray); // static field undefined :(
    }
}

Svar #1

  static _gray: {
    default: '#ABAFBE',
    darker: ['#7C8298', '#606473'],
    lighter: ['#C8D1DA', '#E2E3ED', '#F5F6FA']
  };

Detta betyder "klassen har en statisk egenskap som heter _gray, vars typ är [infoga objekt här]". Inget värde tilldelas faktiskt till den, bara en typ. Eftersom typinformationen tas bort vid transpiling försvinner allt detta. Istället vill du göra så här, med ett likhetstecken istället för ett kolon:

 static _gray = {
    default: '#ABAFBE',
    darker: ['#7C8298', '#606473'],
    lighter: ['#C8D1DA', '#E2E3ED', '#F5F6FA']
  };

Med denna modifierade kod tilldelar du ett faktiskt objekt till det, inte bara definierar typer. Denna skapelse och tilldelning av ett objekt kommer fortfarande att ske efter att koden har transpilerats till JavaScript.

Svar #2

Det finns ett syntaxproblem. Egenskaper tilldelas värden med = i en klass.

Prova detta:

export class SystemColors {
  static _gray = {
    default: '#ABAFBE',
    darker: ['#7C8298', '#606473'],
    lighter: ['#C8D1DA', '#E2E3ED', '#F5F6FA']
  };

  static get gray() {
    return {
      default: '#ABAFBE',
      darker: ['#7C8298', '#606473'],
      lighter: ['#C8D1DA', '#E2E3ED', '#F5F6FA']
    };
  }
}

Här är ett Fungerande Exempel StackBlitz för din referens.

Relaterade artiklar