What causes the failure send a variable from a component to a service, in this Angular 11 app?-CodePudding

In an Angular 11 app, I have a service and a component and I need to bring a variable (that contains search items) from the component to the service.

The service:

export class NavigationService implements OnDestroy {
    private getSearchResult$: Observable<any>;
    private getSearchResultSubject = new Subject<any>();
    
    constructor() {
        this.getSearchResult$ = this.getSearchResultSubject.asObservable();
    }
    
      public getSearchResult() {
        console.log('searchResults: ', this.categoryComponent.searchResult$);
        this.getSearchResultSubject.next();
    }
}

The component:

export class CategoryComponent implements OnInit {
    public searchResult$: Observable<SearchResult>;
    
     constructor(
        private _navigationService: NavigationService,
      ) {
        super();
        this._navigationService.getSearchResult();
      }
}

There are no compilation errors.

The problem

For a reason I have been unable to understand, the line this.categoryComponent.searchResult$ throws this error:

TypeError: Cannot read properties of undefined (reading 'searchResult$')

Where is my mistake?

CodePudding user response：

There's some mistakes happening with your project now, some are just minor nitpicks but also a couple of implementations being wrong.

If we first look at your service.file

 constructor() {
    this.getSearchResult$ = this.getSearchResultSubject.asObservable();
}

In angular you usually dont use the constructor to do any real logic or assignment we use the onInit lifecycle for that, however services doesnt have the capability of implementing that so I can understand your thinking in this regard.

For your get method you first console.log the components variable / classmember which isnt available to the service hence the error (also described by brk). You also just set the next of the subject with no value and not returning anything.

  public getSearchResult() {
    console.log('searchResults: ', this.categoryComponent.searchResult$);
    this.getSearchResultSubject.next();
}

Looking at your component file:

constructor(
    private _navigationService: NavigationService,
  ) {
    super();
    this._navigationService.getSearchResult();
  }

The same issue here with the constructor handling logic where it should be moved to a lifecycle method or assigned to a variable. I've also never seen super() used within a constructor before in angular and dont think its necessary to have but if it doesnt do harm then its up to you to keep it or not.

Im not entirely sure what it is you need to do but i've created a stackblitz where you from the component update the value of the subject in the service and then subscribe to its values to present it back in the component. Let me know if its something along those lines you are looking for or if its something else and we can work it out together.

https://stackblitz.com/edit/angular-ivy-ghl84q?file=src/app/app.component.ts

CodePudding user response：

You are trying to call the component inside the service which should not be the case. . Component should call the service but not the other way. Also inside the service there is no instance of categoryComponent.

So this line

console.log('searchResults:'this.categoryComponent.searchResult$); is bound to throw error.

Remove the console.log and also getSearchResult in service file is not returning anything. So the component will get undefined