angular ng-init alternativa en angular 2

¿Cuál es la alternativa de ng-init="myText='Hello World!'" En Angular 2 para agregar en la plantilla, no en el componente

  

la alternativa en Angular 2

Puedes usar una directiva

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

puedes usarlo para pasar una función para que se llame como

 

o para hacer que los valores estén disponibles

 
  • ngInit addes the directive
  • [values]="{a: 'a', b: 'b'}" establece algunos valores iniciales
  • #ngInit="ngInit" crea una referencia para un uso posterior
  • ngInit.values.a lee el valor a de la referencia creada.

Consulte también Conversión de Angular 1 en función Angular 2 ngInit

Es posible utilizando el gancho OnInit Life Cycle como se muestra a continuación,

  1. Importar OnInit desde la biblioteca central

     import {Component, OnInit} from '@angular/core' 
  2. Implementarlo en su clase de componente

     export class App implements OnInit { } 
  3. Implementar el método ngOnInit

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

DEMO EN VIVO

Si bien estoy de acuerdo en que la inicialización debe entrar en el gancho del ciclo de vida ngOnInit, también debe tenerse en cuenta que puede usar el constructor del componente para inicializar los miembros de la clase. En su ejemplo simple, incluso podría usar la statement del miembro para establecer la variable, por ejemplo:

 @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}); } } 

una expresión de valor se establece mediante *ngxInit y se publica utilizando una *ngxInit :

 
{{idx}}

publicado como https://www.npmjs.com/package/ngx-init

Poca actualización! En las últimas versiones de Angular esto no funcionará:

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

Deberías usar ‘[]’:

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

Una posible mejora sobre la respuesta de 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'; } } } 

Y luego use funciones de orden superior para pasar datos, de esta manera:

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

Si utiliza una función de orden superior como esta, tampoco necesita preocuparse por lo que está dentro de myInitFunction ya que una función de flecha es realmente lo que se pasa.

Use la directiva como tal:

 // component.html  

Si intentara crear una directiva que no pase una función como entrada de la manera descrita aquí, correrá el riesgo de bucles infinitos. Por ejemplo, obtendrías eso si toda la directiva simplemente estuviera evaluando la expresión que le diste.

Esto es lo que sucedería si su método myInitFunction no devolviera otra función (y su HTML era el mismo que el anterior). Te consolarías, volverías indefinido, y luego cambiaría la detección lo volvería a evaluar, consolando una y otra vez.