如何在角度中隐藏组件，但仍从父组件传递函数?

Question

我有这个代码：

<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();
}

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

Answer 1

组件需要位于 DOM 中才能处理事件发射器。如果没有，则可以删除事件发射器并使用单一实例服务。尝试以下操作

shared.service.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();
}
}