angular - Vlastnosť 'X' je súkromná a prístupná iba v rámci triedy 'xyzComponent'

Snažím sa vytvoriť aplikáciu Angular2 pre produkciu, na čo sledujem tento blog. Po úspešnej kompilácii môjho ngc, keď sa uskutoční tsc kompilácia, vyskytne sa nižšie uvedená chyba zobrazená na obrázku:

Po chvíľom hľadaní som našiel tento blog, ktorý vysvetľuje problém v sekcii "The context property", ktorú však nemôžem správne pochopiť, možno vám to dá dobrú predstavu o tom, čo sa deje zle. V podstate, keď robíme premennú súkromnou, dostávame "CHYBA: Vlastnosť je súkromná a je prístupná iba v rámci triedy".

Odpoveď č. 1

Pre danú komponentu musia byť všetky jej členy (metódy, vlastnosti) prístupné z jej šablóny verejné v scenári AOT kompilácie. Je to spôsobené tým, že šablóna je premenená na TS triedu. Generovaná trieda a komponenta sú teraz 2 samostatné triedy a nemôžete pristupovať k súkromným členom cez triedy.

Stručne: k súkromným členom vo vašich šablónach nemôžete pristupovať, ak chcete používať kompiláciu vopred.

Pre lepšie vysvetlenie https://github.com/angular/angular/issues/11422

Odpoveď č. 2

Možno ďalšia, ešte jednoduchšia odpoveď je:

Chlapci, prosím, nevolajte súkromné metódy, polia alebo vlastnosti z HTML :)

P.S. pri kompilovaní kódu *.ts na *.js AOT odmieta prepojiť nepublikované členy s HTML šablónou.

A „áno“, toto spôsobí zlyhanie vášho buildu :D

Odpoveď č. 3

Dostal som toto, keď som deklaroval súkromné injektovateľné objekty v konštruktore:

constructor(private service: SpecificObjectService) { }

A použil ich v šablóne:

*ngFor="let pd of service.listSpecificObject "

Riešenie je:

constructor(public service: SpecificObjectService) { }

Odpoveď č. 4

Takže som tento problém vyriešil, urobím to krátko a jednoducho. Na jeho vyriešenie som si dôkladne prečítal tento blog. V časti „Vlastnosť context“ je riešenie tohto problému také, že Nepoužívajte ani nevytvárajte súkromnú premennú, ak ju chcete priamo použiť vo view pri vytváraní build-u s AOT (t.j. Ahead Of Time) pre produkciu.

*napríklad*

// component.ts
@Component({
  selector: 'third-party',
  template: `
    {{ _initials }}
  `
})
class ThirdPartyComponent {
  private _initials: string;
  private _name: string;

  @Input()
  set name(name: string) {
    if (name) {
      this._initials = name.split(' ').map(n => n[0]).join('. ') + '.';
      this._name = name;
    }
  }
}

výstup: Vlastnosť '_initials' je súkromná a je prístupná len v triede 'ThirdPartyComponent'.

Riešenie:

aktualizovať toto private _initials: string; na jednoducho _initials: string;

Na túto odpoveď mi Harish Gadiya poskytol nejakú pomoc, tak za to ďakujem.

Súvisiace články