कुछ `* ngIf` स्थिति पूरी होने पर कक्षा सजावट से एक निश्चित विधि कैसे कॉल कर सकता हूं?

Question

कुछ *ngIf स्थिति मिलने पर मैं कक्षा सजावट से एक निश्चित विधि कैसे कॉल कर सकता हूं। मैं एक परिदृश्य this AngularJS वास्तव में की तरह सवाल जिसमें एनजी-init() प्रयोग किया जाता है लेकिन एनजी-init Angular2

का हिस्सा

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

Answer 1

यह क्या callSomeMethod() कर रहा है पर निर्भर करता है नहीं है, लेकिन एक संभावना के लिए एक निर्देश को जोड़ने के लिए है *ngIf तत्व, और उस निर्देश को OnInit उस निर्देश के हुक में निष्पादित करें।

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

और कहीं:

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

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

आप इस विधि में माता पिता के घटक के लिए उपयोग की जरूरत है, तो आप निर्देश में निर्माता इंजेक्शन के माध्यम से इसे के ahold पाने के कर सकते हैं:

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

और इसके बाद आपको this.parent के माध्यम से इसका उपयोग होगा।

यह सबसे समान दृष्टिकोण है जिसे मैं एनजी 1 दृष्टिकोण के बारे में सोच सकता हूं, लेकिन जैसा कि मैंने कहा - someMethod() को पूरा करने की आवश्यकता है, यह संभवतः एक व्यवहार्य समाधान नहीं हो सकता है। यदि नहीं, तो कृपया बताएं कि क्यों, और यह मुझे एक बेहतर विचार देगा कि हम यहां क्या कर रहे हैं।

Answer 2

यह अनुकूलित ngIf निर्देश और template सिंटैक्स का उपयोग संभव है:

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

आप सही/गलत (दिखाएँ/छिपाएँ) स्थितियों के लिए कॉलबैक जोड़ने के लिए सक्षम होना चाहिए।

निर्देशक स्रोत:

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