alternativa angular di ng-init in Angular 2

Qual è l’alternativa di ng-init="myText='Hello World!'" In Angular 2 per aggiungere il modello, non nel componente

  

l’alternativa in Angular 2

Puoi usare una direttiva

 @Directive({ selector: 'ngInit', exportAs: 'ngInit' }) export class NgInit { @Input() values: any = {}; @Input() ngInit; ngOnInit() { if(this.ngInit) { this.ngInit(); } } } 

puoi usarlo per passare una funzione per essere chiamata come

 

o per rendere i valori disponibili

 
  • ngInit la direttiva
  • [values]="{a: 'a', b: 'b'}" imposta alcuni valori iniziali
  • #ngInit="ngInit" crea un riferimento per un uso futuro
  • ngInit.values.a legge a valore dal riferimento creato.

Vedi anche Conversione della funzione Angolare 1 in Angolare 2 ngInit

È ansible utilizzando il hook del ciclo di vita OnInit come di seguito,

  1. Importa OnInit dalla libreria principale

     import {Component, OnInit} from '@angular/core' 
  2. Implementalo nella tua class di componenti

     export class App implements OnInit { } 
  3. Implementa il metodo ngOnInit

      ngOnInit(){ this.myText='Hello World!' } 

DIMOSTRAZIONE DAL VIVO

Mentre sono d’accordo sul fatto che l’inizializzazione dovrebbe andare nel hook del ciclo di vita ngOnInit, si dovrebbe anche notare che è ansible utilizzare il costruttore del componente per inizializzare i membri della class. Nel tuo semplice esempio, potresti anche usare la dichiarazione membro per impostare la variabile, ad esempio:

 @Component({ template: '
{{myText}}
' }) export class MyComponent { myText = 'Hello World!'; }
 @Directive({ selector: '[ngxInit]', }) export class NgxInitDirective { constructor( private templateRef: TemplateRef, private viewContainer: ViewContainerRef) { } @Input() set ngxInit(val: any) { this.viewContainer.clear(); this.viewContainer.createEmbeddedView(this.templateRef, {ngxInit: val}); } } 

un’espressione di valore viene impostata tramite *ngxInit e pubblicata utilizzando as micro-syntax:

 
{{idx}}

pubblicato come https://www.npmjs.com/package/ngx-init

Piccolo aggiornamento! Nelle ultime versioni di Angular questo non funzionerà:

 @Directive({ selector: 'ngInit', exportAs: 'ngInit' }) 

dovresti usare ‘[]’:

 @Directive({ selector: '[ngInit]', exportAs: 'ngInit' }) 

Un ansible miglioramento rispetto alla risposta di Günter:

 @Directive({ selector: 'ngInit', exportAs: 'ngInit' }) export class NgInit { @Input() ngInit: () => any; ngOnInit() { if(typeof this.ngInit === 'function') { this.ngInit(); } else { // preventing re-evaluation (described below) throw 'something'; } } } 

E quindi utilizzare le funzioni di ordine superiore per il trasferimento dei dati, in questo modo:

 // component.ts myInitFunction(info) { // returns another function return () => console.log(info); } 

Se si utilizza una funzione di ordine superiore come questa, non è necessario preoccuparsi di ciò che this trova all’interno di myInitFunction poiché una funzione freccia è effettivamente ciò che viene passato.

Usa la direttiva in questo modo:

 // component.html  

Se dovessi provare a creare una direttiva che non passa in una funzione come input nel modo descritto qui, corri il rischio di loop infiniti. Ad esempio, lo otterresti se tutta la direttiva stesse semplicemente valutando l’espressione che gli hai dato.

Questo è ciò che accadrebbe se il tuo metodo myInitFunction non restituisse un’altra funzione (e il tuo HTML fosse lo stesso di sopra). Dovresti consolarti, tornare indefinito, e poi cambiare il rilevamento lo valuteresti di nuovo, consolandone ripetutamente.