Angular中file input取消选择时导致组件销毁问题求助

问题代码 #

组件TS代码 #

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

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

  @Input() testo?: string;

  @Output() valueChange = new EventEmitter();

  constructor() {
  }

  ngOnInit(): void {

  }

  inputChange(event: any) {
   this.valueChange.emit(event);
  }

  ngOnChanges(event: any): void{
    console.log(event);
  }

  ngOnDestroy(event: any): void {
      console.log(event);
      console.log("Destroy");
  }
}

HTML模板 #

<input #fileInput
       id="importFile"
       type="file"
       style="display: none"
       (change)="inputChange($event)" />

<button type="button"
        mat-raised-button
        color="accent"
        (click)="fileInput.click()"
>
    {{this.testo}}
</button>

问题现象 #

选择文件并确认时功能正常，但取消或关闭文件选择窗口时，Chrome/Firefox会出现短暂卡顿，随后组件被销毁（ngOnDestroy日志触发）；若组件位于弹窗内，弹窗也会随之关闭。

问题原因 #

1. ngOnDestroy钩子参数错误：Angular的OnDestroy接口定义的ngOnDestroy方法无参数，当前代码传入event: any会导致Angular调用钩子时抛出异常，触发组件意外销毁。
2. 文件选择框隐藏方式不当：使用display: none隐藏文件输入框，在部分浏览器中可能触发异常的渲染或事件冒泡行为，加剧卡顿问题。

解决方案 #

1. 修正ngOnDestroy钩子实现 #

移除多余的event参数，并确保组件正确实现OnDestroy接口：

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

@Component({
  selector: 'app-upload',
  templateUrl: './upload.component.html',
  styleUrls: ['./upload.component.scss']
})
export class UploadComponent implements OnInit, OnDestroy {

  @Input() testo?: string;

  @Output() valueChange = new EventEmitter();

  constructor() {
  }

  ngOnInit(): void {

  }

  inputChange(event: any) {
   this.valueChange.emit(event);
  }

  ngOnChanges(event: any): void{
    console.log(event);
  }

  // 移除event参数，符合Angular钩子规范
  ngOnDestroy(): void {
      console.log("Destroy");
  }
}

2. 优化文件选择框的隐藏方式 #

改用视觉隐藏的CSS类替代display: none，避免浏览器渲染异常：
在upload.component.scss中添加样式：

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

修改HTML模板中的类名：

<input #fileInput
       id="importFile"
       type="file"
       class="visually-hidden"
       (change)="inputChange($event)" />

<button type="button"
        mat-raised-button
        color="accent"
        (click)="fileInput.click()"
>
    {{testo}}
</button>

3. 可选：重置文件输入框值（避免重复选择异常） #

在inputChange方法中重置输入框值，允许重复选择同一文件，同时减少浏览器缓存引发的异常：

inputChange(event: any) {
   this.valueChange.emit(event);
   // 重置输入框值
   event.target.value = '';
}

验证 #

完成上述修改后，测试取消文件选择场景：

• 组件不会意外销毁
• 弹窗保持正常显示
• 卡顿现象明显缓解

内容的提问来源于stack exchange，提问作者fraschizzato