재귀 함수의 각도 2 변경 감지 문제

Question

재귀 함수를 사용하여 사용자가 끄는 파일 &을 읽을 때 각도 2 변경 감지에 이상한 문제가 발생했습니다. 위의 예에서

File drop example: plnkr.co

두 개의 파일 드롭 영역이 있습니다 :

는 예를 들어 여기를 참조하십시오. 맨 위 영역은 재귀 함수를 사용하여 사용자가 삭제 한 항목의 모든 파일을 읽습니다. 하단 영역은 단순히 dataTransfer.files을 사용합니다.

삭제 된 파일은 아래에 표시되어야합니다. 그러나 변경 감지는 맨 아래 드롭 영역에서만 작동합니다.

이것은 실제 응용 프로그램의 단순화 된 버전입니다. 나는 탐지를 유발하기 위해 ChangeDetectorRef을 사용하려고하지 않는다. (나는 그것이 plunker 예제에서 작동 할 것이다).

webkitGetAsEntry()으로 삭제 된 모든 파일 (하위 폴더의 파일 포함)을 읽을 수있는 더 좋은 방법이 있습니까? 또 다른 방법으로 각도 변화 감지 기능을 사용할 수 있습니까?

저는 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 {}