Si të aksesoni një konstante në një komponent dhe shërbim Angular 2?

Në Angular2, shablloni mund të aksesojë vetëm fushat dhe metodat e klasës së komponentit. Çdo gjë tjetër është jashtë kufijve. Kjo përfshin gjërat që janë të dukshme për klasën e komponentëve.

Mënyra për ta rrethuar këtë është që të keni një fushë brenda komponentit, e cila thjesht i referohet konstantës dhe ta përdorni atë në vend të kësaj.

Është një kufizim i dizajnit, por mbase duhet të mendoni më shumë se përse keni nevojë për një konstante në shabllon në radhë të parë. Zakonisht këto gjëra përdoren nga vetë komponentët ose shërbimet, por jo nga shablloni.

Meqenëse në shabllonin e Komponentit mund të përdorni vetëm atribute të klasës së Komponentit, nuk mund të përdorni drejtpërdrejt ndonjë konstante të jashtme (ose ndryshore të jashtme).

Mënyra më elegante që kam gjetur deri tani është kjo:

import { MY_CONSTANT } from '../constants';

@Component({
  // ...
})
export class MyTestComponent implements OnInit {

  readonly MY_CONSTANT = MY_CONSTANT;

  // ...
}

i cili në thelb thjesht krijon një atribut të ri MY_CONSTANT brenda klasës së komponentit. Duke përdorur readonly ne sigurohemi që atributi i ri nuk mund të modifikohet.

Duke bërë këtë, në shabllonin tuaj tani mund të përdorni:

{{ MY_CONSTANT }}

Shtrirja e lidhjeve të shabllonit Angular2 është shembulli i komponentit. Vetëm ajo që është e arritshme atje mund të përdoret në lidhje.

Mund ta vini në dispozicion si

class MyComponent {
  myConst = CONST;
}

{{myConst}}

Ka dy drejtime më të mira për mendimin tim:

Mbështjellja e konstantave si veti e komponentit të brendshëm

enum.ts

export enum stateEnum {
  'DOING' = 0,
  'DONE',
  'FAILED'
}

component.ts

import { stateEnum  } from './enum'
export class EnumUserClass {
  readonly stateEnum : typeof stateEnum = stateEnum ;    
}

Shembulli përdor enum, por kjo mund të jetë çdo lloj konstante e përcaktuar. Operatori typeof ju jep të gjitha përfitimet e veçorive të shtypjes TypeScript. Atëherë mund ta përdorni këtë variabël direkt në shabllone:

component.html

<p>{{stateEnum.DOING}}<p>

Kjo zgjidhje është më pak efikase në kontekstin e përdorimit të memories, sepse në thelb po kopjoni të dhëna (ose referenca ndaj konstanteve) në çdo komponent që dëshironi ta përdorni. Përveç kësaj, sintaksa
readonly constData: typeof constData = constData
për mendimin tim prezanton shumë zhurmë sintaksore dhe mund të jetë konfuze për të sapoardhurit

Mbështjellja e konstantës së jashtme në funksionin e komponentit

Opsioni i dytë është të mbështillni variablin/konstantën tuaj të jashtme me funksionin e komponentit dhe ta përdorni atë funksion në shabllon:

enum.ts

export enum stateEnum {
  'DOING' = 0,
  'DONE',
  'FAILED'
}

component.ts

import { stateEnum  } from './enum'
export class EnumUserClass {
  getEnumString(idx) {
    return stateEnum[stateEnum[idx]];
  }   
}

component.html

<p>{{getEnumString(1)}}</p>  

Gjë e mirë është që të dhënat nuk dublikohen në kontrollues, por ndodhin dobësi të tjera të mëdha. Sipas ekipit Angular, përdorimi i funksioneve në shabllone nuk rekomandohet për shkak të mekanizmit të zbulimit të ndryshimeve, i cili funksionon shumë më pak efikas në rastin e funksioneve që kthejnë vlera në shabllone: ​​zbulimi i ndryshimit nuk e ka idenë nëse kthimi i vlerës nga një funksion ka ndryshuar, kështu që do të të thirret shumë shpesh sesa duhet (dhe duke supozuar se po ktheni const prej tij, në fakt nevojitet vetëm një herë, kur plotësoni pamjen e shabllonit. Mund të jetë paksa e efektshmërisë për aplikimin tuaj (nëse jeni me fat) ose mund ta prishë plotësisht atë nëse funksioni zgjidhet me Observable për shembull, dhe ju përdorni tubin async për t'u abonuar në rezultatet, mund t'i referoheni artikullit tim të shkurtër mbi atë rel=">rel"