Question

您好，我试图触发clickOutside事件。在我的应用程序中，我在变量show == true时显示div但是当我显示它时，当我点击任何其他地方时我无法再隐藏它，所以我尝试使用clickOutside

中的以下命令

npm i angular2-click-outside

并在我的组件中

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

这是我的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>

这是我的代码

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
 }
}

当我登录控制台时，没有任何东西我似乎事件没有工作所以任何帮助.thx提前

Answer 1

也许稍后，但是要使工作正常，不要忘记在组件的模块中添加 ClickOutsideModule 依赖项。 imports 数组。

Answer 2

你需要传递一个事件才能像这里一样工作：

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

在你的JS中：

password=input("Please enter your chosen password within 8 and 24 letters: ")
while len(password)>8 and len(password)<24:
    print("this password is within the given length range")
else:
    password=input("Please enter a password within the boundaries: ")

Angular 2 click-outside不起作用

2 个答案: