İç içe geçme NgIf ve (tıklayın) Angular2 içinde

Question

Tıklatıldığında bir dizi alt öğe üreten bir düğmem var, "kullanıcı, alt düğmelerden başka herhangi bir yere tıklatırsa çökme" efekti oluşturmak istiyorum. Bunu yapmak için, tüm sayfaya bir (click) = xyz() eklemek istiyorum, ancak sadece düğme genişletildiyse o etkinliğe sahip olmak istiyorum. Ardından, çocuk elemanlarını sayfa genişliğindeki seçiciden (css z-index ile) konumlandırırdım. Bunu başarmak mümkün mü yoksa bunu yapmanın daha iyi bir yolu var mı?

Şimdiye kadar sahip olduğum şey (sadece düğme tıklatmadan geçiş yapar).

Answer 1

doğrudan pencere nesnesi kullanıyorum, ancak önerilmez:

//save reference 
this.listener = (event)=>{...}; 

window.addEventListener('click', this.listener); 
window.removeEventListener('click', this.listener); 

Answer 2

Hala bildirim yaklaşım kullanmak ve

@HostListener('window:click', ['$event']) 
windowClickHandler(event) { 
    if(!this.expanded) return; 
    collapse(); 
} 

başka çökmüş çıkarırken sadece olayları göz ardı edebilirsiniz yol, yalnızca genişletildiğinde etkinleştirilen bir yönerge olabilir

Sonra

@Directive({ 
    selector: 'globalClick' 
    host: { 
     '[style.display]':'"none"', 
    } 
} 
class GlobalClick { 
    @Output() globalClick:EventEmitter = new EventEmitter(); 

    @HostListener('window:click', ['$event']) 
    windowClickHandler(event) { 
    this.globalClick.emit(event); 
    } 
} 

ve

<span *ngIf="expanded" (globalClick)="collapse($event)"> 

gibi kullanırız