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

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

lyfecycle 钩子的顺序

更多信息Link

如果您想将 load 放在外面，您必须将它放在由用户从模板或任何其他组件手动触发的方法中。

[or in other lifecycle hook event]

UDPATE

如果你想手动触发你需要在组件中创建一个方法的函数，比如

call(){
 // the body
}

并从模板或任何其他组件调用它，例如

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

或

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

Answer 2

我们需要在 ngOnInit 中编写 this.userSuggestionsLoad 实现，因为它是组件初始化期间的生命周期挂钩和调用。这里我们需要实现 subject，因为它是可观察的，我们通常注册一次可观察对象，当它发生任何变化时它就会被调用。

现在，如果您需要在子组件中实现可用，请执行以下操作：

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
}

}

Angular2 - 为什么主题实例被放置在 ngOninit 中？

Angular2 - why instance of subject is placed inside the ngOninit?

angular2-components

angular2-observables

angular