Jak mogę wywołać pewną metodę z dekoratora klasy, gdy spełniony jest warunek `* ngIf`?

Question

Jak mogę wywołać pewną metodę z dekoratora klasy, gdy spełniony jest jakiś warunek *ngIf. Mam scenariusz dokładnie jak this AngularJS zapytania, w którym ng-init() jest używana ale ng-startowy nie jest częścią Angular2

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

Answer 1

To zależy co callSomeMethod() robi, ale jedną z możliwości jest dodanie dyrektywy do element *ngIf i wykonaj tę logikę w haku tej dyrektywy.

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

I gdzie indziej:

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

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

Jeśli potrzebujesz dostępu do komponentu macierzystego w tej metodzie można uzyskać Ahold nim poprzez wstrzyknięcie konstruktora w dyrektywie:

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

i będziesz wtedy mieć do niego dostęp poprzez this.parent.

Jest to najbardziej analogiczne podejście, jakie mogę zastosować w podejściu ng1, ale tak jak powiedziałem - w zależności od tego, co musi osiągnąć someMethod(), może to nie być możliwe rozwiązanie. Jeśli nie, skomentuj/edytuj swoje pytanie, aby wyjaśnić, dlaczego tak jest, a to pozwoli mi lepiej zrozumieć, co tu robimy.

Answer 2

Jest to możliwe przy użyciu niestandardowych ngIf dyrektywę i template składnię:

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

powinieneś być w stanie dodać do wywołania zwrotne prawda/fałsz (pokaż/ukryj) warunkach.

dyrektywa źródło:

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