Angular2 - почему экземпляр объекта находится внутри ngOninit?

Question

Я использую следующий код с сайта angular.io. для получения наблюдаемых наблюдаемых.

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

Я хочу понять почему this.userSuggestionsLoad находится внутри ngOninit всегда, и если я помещаю это снаружи, это не работает.

Я хочу понять это, так как хочу сделать эту функциональность базовым компонентом и хочу расширить этот компонент в моем другом компоненте. но в этом случае this.userSuggestionsLoad не срабатывает может быть из-за ngOninit,

Answer 1

Нам нужно написать реализацию this.userSuggestionsLoad внутри ngOnInit, так как это ловушка жизненного цикла и вызов во время инициализации компонента. Здесь нам нужно реализовать субъект, так как он является наблюдаемым, и мы обычно регистрируем наблюдаемый один раз, и он вызывается, когда в нем что-то меняется.

Теперь, если вам нужна ваша реализация avaibale внутри дочернего компонента, выполните следующие действия:

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

Причина в том, что когда компонент загружается после constructor ngOnInit Хук жизненного цикла называется.

Заказ лифецикловых крючков

Для получения дополнительной информации об этом Ссылка

Если вы хотите разместить load снаружи вы должны поместить его в метод, который вручную запускается пользователем из шаблона или любого другого компонента.

[или в другом событии ловушки жизненного цикла]

UDPATE

если вы хотите вручную вызвать функцию, вам нужно создать метод в компоненте, как

call(){
 // the body
}

и вызвать это из шаблона или любого другого компонента, например,

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

или же

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