BehaviorSubject 在变量改变时不执行

Question

I am not sure if I understand the usage of a BehaviorSubject , but what I want to do is watch a variable for change, and this variable is a two-way binding variable attached to <input type="file"> . When the input changes I want to execute a function that will automatically upload the file.

<input type="file" [(ngModel)]="presentationService.fileSelected">

The component I am using looks like this:

@Component({
    selector: '...',
    templateUrl: '...'
})
export class CreatePresentationStep1 {
    public constructor(public presentationService: PresentationService) { }
}

The service looks like this:

@Injectable()
export class PresentationService {
    public fileSelected?: File;

    public constructor() {
        this.handlers();
    }

    private handlers(): void {
        new BehaviorSubject<File>(this.fileSelected).subscribe({
            next: (file) => {
                console.log('file', file);
            }
        });
    }
}

When the component loads, the console log runs and prints file undefined , which is correct. When I click on the input field and select a file, the behavior never runs again. Is that intended? I would expect the call to run again since the variable changed. How can I get my behavior to run every time the variable changes?

Answer 1

That's not really how a BehaviorSubject works. What you pass in the constructor is just the default initial value. It cannot monitor a property. In your case, this code should work:

<input type="file" [ngModel]="presentationService.fileSelected$ | async" 
       (ngModelChange)="presentationService.fileSelected$.next($event)">

@Component({
    selector: '...',
    templateUrl: '...'
})
export class CreatePresentationStep1 {
  constructor(public presentationService: PresentationService) { }
}

@Injectable()
export class PresentationService {
    public readonly fileSelected$ = new BehaviorSubject<File | void>(void 0);

    public constructor(private _httpClient: HttpClient) {
        this.handlers();
    }

    private handlers(): void {
      this.fileSelected$.subscribe({
        next: (file) => {
          console.log('file', file);
        }
      });
    }
}

Although this is not entirely like I would do it. This gives consumers of your PresentationService full access to the subject/observable, but it's one way :)

Answer 2

Try this:

<input type="file" (change)="fileChangeEvent($event)">

Bind event listener in component:

@Component({
    selector: '...',
    templateUrl: '...'
})
export class CreatePresentationStep1 {
    public constructor(public presentationService: PresentationService) { }
    public fileChangeEvent(fileInput: any) {
      const file = fileInput.target.files[0];
      this.presentationService.handlers(file).subscribe(file => console.log('file', file));
   }
}

And in Service:

@Injectable()
export class PresentationService {
    public fileSelected?: File;
    private handlersSubject= new BehaviorSubject<File>(undefined);
    public handlerObs$ = this.handlersSubject.asObservable();

    public handlers(file: any): void {
        this.handlersSubject.next(file);
    }
}