Question

让我们假设我有下面显示的代码。 this.fileInput.nativeElement.click();不起作用，因为它是由sendMessage触发的，并且不是直接由用户操作触发的，但是我需要使用sendMessage的响应来检查data.uploading是否等于改为True。有人知道我该如何解决吗？

navbar.component.html：

      <li class='nav-item sidebar-false-upload' *ngIf="isCloud() && !sidebarVisible">
<label #fileInput (click)="this.uploadFile()" data-toggle="collapse"
              aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation" class="pretty-file nav-link" ><i
          class="nc-icon nc-cloud-upload-94"></i>Upload

                  <div id="fileSelector" >
                      <input type="file" name="fileUplaod" id="fileUpload"
                      multiple ng2FileSelect [uploader]="this.UploaderService.uploader" >
                  </div>
  </label>
      </li>

navbar.component.ts：

export class NavbarComponent implements OnInit, AfterViewInit {
  message:string;
  @ViewChild('fileInput') fileInput: ElementRef;

  constructor(private renderer:Renderer, private http: Http, public location: Location, private element: ElementRef, private data: DataService, private UserService: UserService, private UploaderService: UploaderService) {
  }

keyDownFunction(term:string, event) {

  if(event.keyCode == 13) {

    this.UserService.sendMessage(term, localStorage.getItem('current_path')  + '/').subscribe((data : any) => {
      localStorage.setItem('message', data.message);
      localStorage.setItem('path', data.path);

      if (data.uploading == 'True')
      {
        this.fileInput.nativeElement.click();
      }
      else if (data.downloading == 'True')
      {
       // it is just an example, I wanted to show that I have more options than uploading and downloading so I have to check response from sendMessage in variable data.
      }
  },
  (err: HttpErrorResponse) => {
    console.log(err.error)
    alert(err.error)
  });

  }
}
}

user.service.ts：

sendMessage(message: string, path: string) {

    const data = {
      message: message,
      path: path
    }

    var reqHeader = new HttpHeaders({ 'Content-Type': 'application/json',  'Authorization': 'token ' + localStorage.getItem('userToken') });

    return this.http.post(this.rootURL + localStorage.getItem('path'), data, { headers: reqHeader});

  }

因此，正如我已经提到的那样，并且您可以在上面看到，问题与sendMessage有关。我需要获取data.variable来检查我必须执行的内容，但是另一方面，this.fileInput.nativeElement.click();不起作用，因为它不是用户直接执行的操作。当我在this.fileInput.nativeElement.click();之后直接调用if(event.keyCode == 13) {时，它可以正常工作，但是我无法执行此操作。如果不清楚或需要更多信息，请告诉我。谢谢。

Answer 1

您需要在其中添加点击命令：

this.ngZone.run(() => {
    .click() command
});

this.ngZone来自您的构造函数，您需要向您的构造函数添加私有ngZone：NgZone。

原因是因为您的异步函数不会被angular拾取。这将迫使它成为现实。

export class NavbarComponent implements OnInit, AfterViewInit {
  message:string;
  @ViewChild('fileInput') fileInput: ElementRef;

  constructor(private renderer:Renderer, private http: Http, public location: Location, private element: ElementRef, private data: DataService, private UserService: UserService, private UploaderService: UploaderService, private zone: NgZone) {
  }

keyDownFunction(term:string, event) {

  if(event.keyCode == 13) {

    this.UserService.sendMessage(term, localStorage.getItem('current_path')  + '/').subscribe((data : any) => {
      localStorage.setItem('message', data.message);
      localStorage.setItem('path', data.path);

      if (data.uploading == 'True')
      {
        this.zone.run(() => {
            this.fileInput.nativeElement.click();
        });
      }
      else if (data.downloading == 'True')
      {
       // it is just an example, I wanted to show that I have more options than uploading and downloading so I have to check response from sendMessage in variable data.
      }
  },
  (err: HttpErrorResponse) => {
    console.log(err.error)
    alert(err.error)
  });

  }
}
}

如何从用户生成的事件内部触发点击？

1 个答案: