Angular2-为什么将Subject实例放置在ngOninit内？

Question

I am using the following code from angular.io website. for getting searched observables.

import {Observable} from 'rxjs/Observable';
import {Subject} from 'rxjs/Subject';

import 'rxjs/add/observable/of';

import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/debounceTime';
import 'rxjs/add/operator/distinctUntilChanged';
import 'rxjs/add/operator/switchMap';

@Component({
  selector: 'app-dropdown-suggestion',
  templateUrl: './dropdown-suggestion.component.html',
  styleUrls: ['./dropdown-suggestion.component.css']
})
export class DropdownSuggestionComponent implements OnInit {

    userSuggestions: Observable<User[]>;
  userSuggestionsLoad: Subject<string> = new Subject<string>();

  constructor(protected apiService: ApiService,) { }

  ngOnInit() {
    this.userSuggestions = this.userSuggestionsLoad
      .debounceTime(300)        // wait 300ms after each keystroke before considering the term
      .distinctUntilChanged()   // ignore if next search term is same as previous
      .switchMap(term => this.apiService.search(term))
      .catch(error => {
        console.log(error);
        return Observable.of<User[]>([]);
      });
  }

  searchUsers(term) {
    const url = this.url + term ;
    this.userSuggestionsLoad.next(url);
  }

I want to understand why this.userSuggestionsLoad is placed inside the ngOninit always and if i place this outside it doesn't work.

I want to understand this as I want to make this functionality as base component and want to extend this component in my other component. but in that case this.userSuggestionsLoad is not getting triggered may be because of ngOninit .

Answer 1

We need to write this.userSuggestionsLoad implementation inside ngOnInit since it is lifecycle hook and call during component init. Here we need to implement subject since it is observable and we usually registered observable once and it get called when anything changed in it.

Now if you need your implementation avaibale inside child component you do as below:

export class DropdownSuggestionComponent implements OnInit {

    userSuggestions: Observable<User[]>;
  userSuggestionsLoad: Subject<string> = new Subject<string>();

  constructor(protected apiService: ApiService,) { }

  ngOnInit() {
    this.userSuggestions = this.userSuggestionsLoad
      .debounceTime(300)        // wait 300ms after each keystroke before considering the term
      .distinctUntilChanged()   // ignore if next search term is same as previous
      .switchMap(term => this.apiService.search(term))
      .catch(error => {
        console.log(error);
        return Observable.of<User[]>([]);
      });
  }


Now extending with another component

export class ChildComponent extends DropdownSuggestionComponent implement OnInit {

ngOnInit(): void {
super.ngOnInit(); // This code will call your parent class onInit which you want to execute
}

}

Answer 2

The reason is that When the component loads up after the constructor the ngOnInit life cycle hook is called.

The order of lyfecycle hooks

For more info on it Link

If you want to place the load outside you have to place it inside a method that is manually triggered by the user from a template or any other component.

[or in other lifecycle hook event]

UDPATE

if you want to manually trigger the function you need to create a method in the component like

call(){
 // the body
}

and call this from a template or any other component, like

<button (click) = "call" > Call Method </button> 

or

let comp = new <componentName> ();
comp.call();