घटना जब घटक दिखाई देता है

Question

क्या मेरे घटक दिखाई देने पर अंगुलर 2 में कोई ईवेंट निकाला गया है? इसे एक टैबcontrol में रखा गया है और जब उपयोगकर्ता स्विच करता है तो मैं अधिसूचित होना चाहता हूं, मैं अपने घटक को किसी ईवेंट को आग लगाना चाहता हूं।

Answer 1

मैंने आखिरकार क्या किया (जो बहुत सुंदर नहीं है लेकिन काम करता है जबकि मेरे पास ऐसा करने का बेहतर तरीका नहीं है ...) ngAfterContentChecked() कॉलबैक का उपयोग करना और परिवर्तन को स्वयं संभालना है।

@ViewChild('map') m; 
private isVisible: boolean = false; 
ngAfterContentChecked(): void 
{ 
    if (this.isVisible == false && this.m.nativeElement.offsetParent != null) 
    { 
     console.log('isVisible switched from false to true'); 
     this.isVisible = true; 
     this.Refresh(); 
    } 
    else if (this.isVisible == true && this.m.nativeElement.offsetParent == null) 
    { 
     console.log('isVisible switched from true to false'); 
     this.isVisible = false; 
    } 
} 

Answer 2

आप ngAfterViewInit() कॉलबैक

https://angular.io/docs/ts/latest/guide/lifecycle-hooks.html

Answer 3

उपयोग कर सकते हैं ऐसा कोई घटना है, लेकिन आप एक टैब नियंत्रण का उपयोग कर रहे हैं, उचित तरीके से यह करने के लिए के लिए एक टैब परिवर्तन @Output बनाने के लिए किया जाएगा यदि आपका कस्टम नियंत्रण है, तो अन्य टैब नियंत्रण (जैसे ng-bootstrap) में कुछ टैब परिवर्तन ईवेंट भी हैं।

यदि आपके घटक को इसके बारे में पता होना चाहिए, तो आप यह टैब बदलने के लिए इस टैब परिवर्तन ईवेंट का उपयोग कर सकते हैं, और यदि आपको पता है कि कौन सा टैब दिखाई दे रहा है, तो आप यह भी जानते हैं कि आपका घटक दिखाई दे रहा है या नहीं। तो अगर आप कुछ इस तरह कर सकते हैं:

onTabChange(event) { 
    this.currentTab = /** Get current tab */; 
} 

और फिर आप यह अपने आप में अपने घटक को भेज सकते हैं अगर आप एक निवेश है:

@Input() activated: boolean = false; 

और फिर आप के साथ इसे लागू कर सकते हैं:

<my-component [activated]="currentTab == 'tabWithComponent'"></my-component> 

अब आप OnChanges को देख सकते हैं कि मॉडल मान activatedtrue पर बदल गया है या नहीं।

---

तुम भी एक Observable इस तरह के साथ एक सेवा का उपयोग करने के लिए इस refactor कर सकते हैं:

@Injectable() 
export class TabService { 
    observable: Observable<any>; 
    observer; 

    constructor() { 
    this.observable = Observable.create(function(observer) { 
     this.observer = observer; 
    }); 
    } 
} 

एक घटक इन परिवर्तनों को सुनने के लिए चाहता है, यह tabService.observable की सदस्यता ले सकते। जब आपका टैब बदलता है, तो आप tabService.observer.next() के साथ नई वस्तुओं को धक्का दे सकते हैं।