Angular 2 click-outside ne fonctionne pas

Question

salut tout le monde que je tente de déclencher un événement clickOutside. dans mon application je montre une div lorsque la variable show == true mais quand je le montre je ne peux pas le cacher à nouveau quand je clique sur une autre où donc j'essayé d'utiliser clickOutside

i utilisé la commande suivante dans cette page angular2-click-outside

npm i angular2-click-outside 

et dans mon élément

 <div class="row hidden_one" (clickOutside)="close()"> 

ceci est ma page html

<div class="container-fluid"> 
    <div class="row wrapper"> 
    <div class="col-lg-8 col-md-8 col-sm-9 first"> 
    <input type="text" class="form-control title" placeholder="{{placeholder}}" #task> 
</div> 
<div class="col-lg-4 col-md-4 col-sm-3 second hiddden"> 
    <div class="row"> 
    <div class="col-lg-8 col-md-8 col-sm-8 col-xs-8"> 
     <input type="text" class="form-control right" value="00:00:00" (click)="showdiv()" [(ngModel)]="timer" #time> 
    </div> 
    <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 font"> 
     <i class="fa fa-play-circle fa-3x first" aria-hidden="true" *ngIf="play" (click)="startPause()"></i> 
     <i class="fa fa-stop-circle fa-3x second" aria-hidden="true" *ngIf="pause" (click)="startPlay(task.value, time.value)"></i> 
    </div> 
    </div> 
    <div class="row hidden_one" (clickOutside)="close()"> 
    <div class="start-end" *ngIf="show" (clickOutside)="hide($event)"> 
     <div class="col-lg-6"> 
     <div class="form-group"> 
      <label for="Start">Start</label><br> 
      <input type="text" class="form-control" class="startTime" value="{{startTime}}" #val (blur)="validate(val.value)"> 
     </div> 
     </div> 
     <div class="col-lg-6"> 
     <div class="form-group"> 
      <label for="Start">Stop</label><br> 
      <input type="text" class="form-control" class="startTime" [(ngModel)]="stopTime" [disabled]="pause"> 
     </div> 
     </div> 
    </div> 
    </div> 
</div> 

et ceci est mon ts Code

import { Component } from '@angular/core'; 
import { timeInterface } from './timeInterface'; 
import { timesList } from './times-list-component'; 
import { TimeService } from './time-service'; 
import * as moment from 'moment'; 

@Component({ 
selector: 'my-app', 
templateUrl: './html/app-component.html', 
styleUrls: ['./css/app-component.css'] 

})

export class AppComponent { 
    placeholder:string = "What are you working on?"; 
    play:boolean = true; 
pause:boolean = false; 
show:boolean=false;// For Showing The Hidden Div 
countup:any; 
timeSum :any; 
timer:string = "00:00:00"; 
// hidden Div Start Time 
startTime: any; 
stopTime: any; 
bs:any; 
bbs:any; 
// Array to Hold The Tasks With Time 
tasks:timeInterface[] =[]; 

constructor(private timeService:TimeService) {} 

startPause() {// when click on play button 
    // this.bs = moment(); 
    // this.startTime = this.bs.format('hh:mm A'); 
    // this.play = false; 
    // this.pause = true; 

    // let sec= 0; 
    // let min = 0; 
    // let hour = 0; 
    // this.countup = setInterval(() => { 
    // if(sec === 59) { 
    //  min++; 
    //  sec = 0; 
    // }else if(min > 59) { 
    //  hour++; 
    //  min = 0; 
    // }else { 
    //  sec++; 
    // } 
    // this.timer = `${this.pad(hour)}:${this.pad(min)}:${this.pad(sec)}`; 
    // }, 1000); 
    this.timeService.startPause(); 
} 

startPlay(name:string, time:any) { 
    this.play = true; 
    this.pause = false; 
    this.timer = "00:00:00"; 
    clearInterval(this.countup); 
    //push the task to array 
    if(name == "") { 
    // this.placeholder = "(no description)"; 
    name = "Add description"; 
    this.tasks.push({title: name, time: time}); 
    } else { 
    name = name; 
    this.tasks.push({title: name, time: time}); 
    } 

} 

pad(num:number, size:number=2): string { // to add zero before sec if it < 
    10 
    var s = num+""; 
    while (s.length < size) s = "0" + s; 
    return s; 
} 
//Show the hidden div 
showdiv() { 
    this.bbs = moment();   
    //console.log(moment(this.bbs.diff(this.bs, 
    'hh:mm:ss')).format('hh:mm:ss')); 
    this.show = true; 
    this.stopTime = this.bbs.format('hh:mm A'); 
    if(!this.pause) { 
    this.startTime = this.stopTime 
    } 
} 
// Validate input value 
    validate(val:string) { 
    let temp =this.startTime; 
    let parsedTime = moment(val, "hh:mm A"); 
    if(parsedTime.isValid()) { 
    this.startTime = parsedTime.format('hh:mm A') 
    } else { 
    this.startTime = "temp"; 
    console.log("no"); 
    } 
} 
close() {// to hide the pop up div 
    console.log('Clicked outside:'); 
    this.show = false 
} 
} 

et quand je journal de la console il n'y a pas chose que je semble là que l'événement ne travailler pour toute aide .thx à l'avance

Answer 1

Vous n EED passer un événement pour que cela fonctionne comme ici:

<div class="row hidden_one" (clickOutside)="onClickOutside($event)"> 

Et dans votre JS:

onClickOutside(event:Object) { 
    alert('works'); 
    }