时间戳

首页 > 解决方案 > 如何以角度隐藏组件但仍从父组件传递函数？

angular - 如何以角度隐藏组件但仍从父组件传递函数？

问题描述

我有这个代码：

<app-csv-confirm-dialog *ngIf="false" (confirmUpload)="addDataFromCSV()"></app-csv-confirm-dialog>

addDataFromCSV() {
  console.log('hi');
}

然后在 csv-confirm-dialog 的 ts 文件中：

confirm(): void {
  this.confirmUpload.emit();
}

但是似乎这不起作用，因为我没有得到console.log，无论如何我仍然可以将函数从父级传递给csv-confirm-dialog？（它必须隐藏，因为它是一个弹出对话框）

标签： angulartypescript

解决方案

组件需要在 DOM 中才能处理事件发射器。如果没有，您可以删除事件发射器并使用单例服务。尝试以下

共享服务.ts

@Injectable({providedIn: 'root'})
export class SharedService {
  private _confirmUploadSource = new BehaviorSubject<any>(null);
  public confirmUpload$ = this._confirmUploadSource.asObservable();

  public setUploadStatus(value: any) {
    this._confirmUploadSource.next(value);
  }
}

CSVConfirmDialog 组件

export class CsvConfirmDialogComponent implements OnInit {
  constructor(private sharedService: SharedService) { }

  confirm(value: any): void {
    this.sharedService.setUploadStatus(value);
  }
}

父组件

export class AppComponent implements OnInit, OnDestroy {
  completed$ = new Subject<any>();

  constructor(private sharedService: SharedService) { }

  ngOnInit() {
    this.sharedService.confirmUpload$.pipe(
      takeUntil(this.completed$)
    ).subscribe(
      value => {
        console.log('hi');
        // do what you were going to do in `addDataFromCSV()` function
      }
    );
  }

  ngOnDestroy() {
    this.completed$.next();           // <-- close the observables
    this.completed$.complete();
  }
}

推荐阅读