Come posso chiamare un determinato metodo dal decoratore di classe quando viene soddisfatta una condizione `* ngIf`?

Question

Come posso chiamare un determinato metodo dal decoratore di classe quando viene soddisfatta una certa condizione *ngIf. Ho uno scenario esattamente come this AngularJS domanda in cui ng-init() viene utilizzato, ma ng-init non fa parte del Angular2

<div *ngIf="obj.someProperty" callSomeMethod() > 
<!--render inner parts--> 
</div> 

Answer 1

Dipende da cosa callSomeMethod() sta facendo, ma una possibilità è quella di aggiungere una direttiva per l'elemento *ngIf ed eseguire tale logica nel gancio OnInit di tale direttiva.

<div *ngIf="obj.someProperty" some-method-directive> 
    <!--render inner parts--> 
</div> 

E altrove:

@Directive({ 
    selector='[some-method-directive]', 
}) 
class SomeMethodDirective implements OnInit { // OnInit imported from angular2/core 

    ngOnInit(){ 
     // insert your someMethod lofic 
    } 
} 

Se è necessario l'accesso alla componente principale di questo metodo, è possibile ottenere ahold di esso tramite l'iniezione del costruttore nella direttiva:

constructor(@Host(ParentComponent) private parent: ParentComponent){ } 

e avrai quindi accesso ad esso tramite this.parent.

Questo è l'approccio più analogo che io possa pensare all'approccio ng1, ma come ho detto, a seconda di cosa deve fare someMethod(), potrebbe non essere una soluzione fattibile. In caso contrario, si prega di commentare/modificare la tua domanda per spiegare perché, e questo mi darà un'idea migliore di ciò che stiamo facendo qui.

Answer 2

E 'possibile utilizzare personalizzata direttiva ngIf e template sintassi:

<template [ngCondition]="obj.someProperty" (show)="callSomeMethod()"> 
<h3 >if callback!</h3> 
</template> 

si dovrebbe essere in grado di aggiungere funzioni di callback per i falsi condizioni vero/(mostra/nascondi).

fonte direttiva:

@Directive({ 
    selector: '[ngCondition]' 
}) 
export class NgCondition 
{ 
    @Output('show') 
    private show:EventEmitter<any> = new EventEmitter<any>(); 

    @Output('hide') 
    private hide:EventEmitter<any> = new EventEmitter<any>(); 

    private _viewContainer:ViewContainerRef; 
    private _templateRef:TemplateRef; 
    private _prevCondition:any; 

    constructor(_viewContainer:ViewContainerRef, _templateRef:TemplateRef) 
    { 
     this._viewContainer = _viewContainer; 
     this._templateRef = _templateRef; 
     this._prevCondition = null; 
    } 

    @Input() 
    public set ngCondition(newCondition:boolean) 
    { 
     if (newCondition && (isBlank(this._prevCondition) || !this._prevCondition)) 
     { 
      this._prevCondition = true; 
      this._viewContainer.createEmbeddedView(this._templateRef); 
      this.show.emit({}); 
     } 
     else if (!newCondition && (isBlank(this._prevCondition) || this._prevCondition)) 
     { 
      this._prevCondition = false; 
      this._viewContainer.clear(); 
      this.hide.emit({}); 
     } 
    } 
}