Как скрыть компонент в angular, но при этом передать функцию от родительского компонента?

Question

У меня есть этот код:

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

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

И затем в файле ts для csv-confirm-dialog:

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

Однако похоже, что это не работает, как я. t получить console.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 component

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

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

Parent component

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