主页 / 问题 / 927003
Accepted
A. Victor
Asked:2020-12-30 06:42:14 +0000 UTC2020-12-30 06:42:14 +0000 UTC

为什么将事件包装在超时中会破坏事件？如何避免？

  • 772

Angular 7. 购物清单应用程序。带有用于排序的产品 div 和颜色按钮的列。例如，“土豆”和“洋葱”可以涂成相同的颜色，这样在使用时会并排放置。还有一个十字 - “购买”的标志。元素重新排列

css / diplay:flex / order:[вычисляемое].

生成的元素*ngFor

订单更改为[ngStyle]

一切正常。但是，当您单击排序时，元素立即消失的位置对用户来说并不明显。我决定在排序之前先计算好方向，然后{margin-top: -70px; }在50ms.

并且当前位置的替换应该推迟100ms。事件}点击子元素shop.component.html

传送到shop.component.ts

变成一个函数 d(elem: any, sort: number)

（自元素和新的排序号）

计算完方向后，元素被赋予了新的样式{margin-top: -70px;}

然后产生一个事件：“排序按钮被按下”，

传递给父组件app.component.ts，

从那里到

data.service.ts

并告诉模型对象新值{order:[]}

事件的到达速度超过 50 毫秒，这会导致即时重建，然后元素在新位置执行一点点舞蹈。这不是我想要的。如果您将事件的启动包装在一个计时器 EVEN ZERO 中：

setTimeout(function() {
              this.ColorBtnClicked.emit(elem);
       }, 0 );

该事件根本不会发出。现在，该元素的行为应如此：它以正确的方向模拟飞行的开始并重建，但它没有获得正确的颜色并且没有收到像 1)2) ... -8) 之类的前缀（这是data.service.ts的任务）。如果您删除超时，那么事件会立即完成它的工作（绘制 div 并放置前缀），然后元素会在一个新的地方跳舞，它在屏幕外是不可见的。

我将尝试以简洁的方式放置代码：

shop.component.html

 <div id="shopping" style="display: block;">
      <ul id="listingUL">
        <li *ngIf="!isFirst" class="item" [ngClass] = "{itemCrossedOut: item.done}" [ngStyle] ="{backgroundColor: 'var(--color' + ('' + item.order) + ')'}">

          <div class="main">
            <span class="itm">{{item.content}}</span>
            <button (click)="d(item, 9)" class="ok">X</button>
          </div>
          <div  class="orderDiv">
            <button (click)="d(item, 1)" class="orderBtn d1">1</button>
            <button (click)="d(item, 2)" class="orderBtn d2">2</button>
            <button (click)="d(item, 3)" class="orderBtn d3">3</button>
            <button (click)="d(item, 4)" class="orderBtn d4">4</button>
            <button (click)="d(item, 5)" class="orderBtn d5">5</button>
            <button (click)="d(item, 6)" class="orderBtn d6">6</button>
            <button (click)="d(item, 7)" class="orderBtn d7">7</button>
            <button (click)="d(item, 8)" class="orderBtn d8">8</button>
          </div>
        </li>
        </div>

      </ul>
    </div>

shop.component.ts 

import {
  Component,
  Input,
  EventEmitter,
  Output,
  OnInit
} from '@angular/core';
import {Item} from '../item';

@Component({
  selector: 'app-shop-comp',
  templateUrl: './shop.component.html',
  styleUrls: ['./shop.component.css']
  })

export class ShopComponent{
  @Input() shopData: Item[];

  @Output() ColorBtnClicked = new EventEmitter<any>();


    d(elem: any, sort: number) {
      let newDone;
      let dir: number; // направление

      // здесь вычисляем новое направление

      if (dir > 0) {elem.direction = '70px 0px -70px 0px';}
      else  if (dir < 0) {elem.direction = '-70px 0px 70px 0px';}


      // setTimeout(function() {
        elem.done = newDone;
        if (sort !== 9) {elem.order = sort; }
        this.ColorBtnClicked.emit(elem);
      // }, 100 );


      setTimeout(function() {
        elem.direction = '0px 0px 0px 0px';
      }, 200 );
  }
}

app.component.ts

    import {Component, OnInit} from '@angular/core';
import {DataService} from './data.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
  providers: [DataService]
})
export class AppComponent implements OnInit {

  constructor(private dataService: DataService) {}

  title = 'Shop-Reminder-App';
  activeScreen = 'inp';
  // activeAdv = 'slp';
  listing = '';
  shopData = [];

  onClickScreenBtn(screen) {
    this.activeScreen = screen;
  }

  onlistingAreaChanged(listing) { // слушаем событие изменился listing и отправляем текст в DataService
    this.shopData = this.dataService.rebuildData(listing);
  }

  ColorBtnClicked() { // слушаем нажатие на цвето-сортировку
        this.listing = this.dataService.rebuildText();
}

  setOldText(obj: any) {
    let text = '';
    for (let i = 0; i < obj.length; i++) {
         text = text + obj[i].content + ',';
    }
    this.shopData = this.dataService.rebuildData(text);
  }



  ngOnInit() {
    this.setOldText(this.shopData);
  }
}

数据服务.ts

import {Item} from './item';

export class DataService {
  private data: Item[] = [];

  // getData(): Item[] {
  //   return this.data;
  // }


  rebuildData(text) {

        this.data = [];
       // присваиваем прорядок согласно номеру 1)-8), если он есть

    return this.data;
  }

  rebuildText() { 
                 //Заглавие, номера 1)2)3)4)5)6)7)8) done(х)
    let text = '';
      // после нажатия на сортировку модифицируем список:  
      //Заглавие, номера 1)2)3)4)5)6)7)8) done(х)    
    return text;
  }
}

项目.ts

export class Item {
  constructor(
    public order: number,
    public content: string,
    public done: boolean,
    public direction: string,
  ) {}
}
angular2

1 个回答

  1. Best Answer
    setTimeout((function() {
  this.ColorBtnClicked.emit(elem);
}).bind(this), 0);

    或者

    setTimeout(() => this.ColorBtnClicked.emit(elem), 0);

    或者

    setTimeout(function(context) {
  context.ColorBtnClicked.emit(elem);
}, 0, this);
    • 1

相关问题