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 }}