javascript - example - Analizador de expresión angular 2 y directiva ng-init

directives angular 6

Question

Básicamente, estoy buscando una forma de implementar una contraparte de la directiva Angular 1.x ngInit .

ngOnInit gancho ngOnInit y el hecho de que es el lugar recomendado para el código de inicialización. Considero que la directiva ngInit una manera rápida y declarativa de prototipar o corregir un componente que no debería usarse generalmente en un código de producción bien escrito (aunque un desarrollador tiene el derecho de elegir lo que sea mejor para él / ella).

Hacer algo así en la directiva ficticia init

<p [init]="foo = 1; bar()"><p>

evalúa la expresión más de una vez y causa

Errores de análisis de plantilla:

Error de analizador: enlaces no pueden contener asignaciones

error.

En Angular 1.x se podría hacer solo con

$parse($attrs.init)($scope)

¿Cómo se puede usar el analizador angular 2 y posiblemente se puede extender para evaluar foo = 1; bar() expresión de la plantilla foo = 1; bar() en la inicialización del componente?

Answer 1

Solo una solución alternativa ( demostración de Plunker ), vea la respuesta de estus para una solución

Directiva init :

@Directive({
  selector: ''[init]'',
  inputs: [''init'']
})
export class InitDir {
  init;

  ngOnChanges() {     // `ngOnInit` if you want it to run just once
    if(this.init){
      let iife = function(str){ return eval(str); }.call(this.init[0], this.init[1]);
    }
  }
}

Uso:

@Component({
  selector: ''my-app'',
  template: `
    <div>
      <h2 [init]="[this, ''this.name = 1; this.bar();'']">Hello {{name}}</h2>
    </div>
  `,
})
export class App {
  constructor() {
    this.name = ''Angular2 (Release Candidate!)''
  }

  bar() {
    alert(''Yo Bar!'');
  }
}

Answer 2

Es

@Directive({ selector: ''[initialize], [on-initialize]'' })
class InitializeDirective {
  @Output() initialize = new BehaviorSubject();
}

y

<div initialize (initialize)="initViaMethodCall(); foo = ''init via assignment''"></div>
<ng-template initialize (initialize)="bar = ''init with no extra markup''"></template>
{{ foo }}
{{ bar }}