In my Angular 9 project, I have the template code like to display the object from a service. and pass the object to the component code upon user interaction on the page.

```
<div *ngIf="report$ | async as report">
  ...
  <div>{{report.Title}}</div>
  <button (click)="DoSomething(report)" >Do something</button>
  ...
</div>

```

However, how can I access the report object from the async pipe from the component code which is not triggered from the page. For example, in the CanDeactive function when the user navigate away from the current page.

```
export class ReportComponent implements OnInit {
  report$: Observable<Report>;

  constructor(
    private route: ActivatedRoute,
    private router: Router,
    private location: Location,
    private reportService: ReportService
  ) { }

  ngOnInit() {
    this.report$ = this.route.paramMap.pipe(
      switchMap((params: ParamMap) => this.reportService.getReport(Number(params.get('id')))
      )
    );
  }

DoSomething(report: Report) {
...
}

canDeactivate(): Observable<boolean> | boolean {
    if isReportChanged("How to access the report object from here?")
      return false;

    return true;
}

```

}