Question

当使用递归函数读取用户拖拽时，我遇到了Angular 2变化检测的奇怪问题。删除文件。

请参阅此处的示例：

File drop example: plnkr.co

在上面的示例中，有两个文件放置区域。顶部区域使用递归函数来读取用户删除项中的所有文件。底部区域只使用dataTransfer.files。

丢弃的文件应该显示在下面。但是，更改检测仅适用于底部下降区域。

这是我实际应用的简化版本。我并不热衷于使用ChangeDetectorRef来触发检测（我知道它适用于plunker示例）。

是否有更好的方法可以使用webkitGetAsEntry()读取所有丢弃的文件（包括子文件夹中的文件）？或者另一种方法适用于角度变化检测？

我在Angular 2.4.9上。谢谢你的帮助。

Answer 1

使用下面的代码替换app.ts中的代码，它将起作用。 Zone.js将在执行回调后检测更改。

//our root app component
import {Component, NgModule,NgZone} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
import { FileDropDirective } from './file.drop.directive'

@Component({
  selector: 'my-app',
  template: `
    <div>
      <div file-drop class="drop-area" readAsItems="yes" 
      (droppedFiles)="onFilesDrop($event)">Recursive func</div>
      <div file-drop class="drop-area" 
      (droppedFiles)="onFilesDrop($event)">Non-recursive func</div>
      <div *ngFor="let f of files">{{ f }}</div>
    </div>
  `,
  styles: [`
    .drop-area {
      width: 100%;
      height: 20vh;
      background-color: #f1f1f1;
      border: 1px solid red;
      margin: 5px 0;
    }
  `]
})
export class App {
  name:string;
  files: string[];
  constructor(private zone:NgZone) {
    this.name = 'Angular2'
    this.files = [];
  }

  onFilesDrop(files) {
    this.zone.run(()=>{
      files.forEach((f) => {
        this.files.push(f.name);
      })
      console.log(this.files);
    });
  }
}

@NgModule({
  imports: [ BrowserModule ],
  declarations: [ App, FileDropDirective ],
  bootstrap: [ App ]
})
export class AppModule {}

具有递归函数的Angular 2变化检测问题

1 个答案: