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

Question

我从angular.io网站使用以下代码。为了获得搜索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); 
    } 

我想知道为什么this.userSuggestionsLoad放在ngOninit总是内，如果我把这个之外这是行不通的。

我想了解这一点，因为我想将此功能作为基本组件，并且希望将此组件扩展到其他组件中。但在这种情况下，this.userSuggestionsLoad未被触发，可能是因为ngOninit。

Answer 1

我们需要编写内部ngOnInit this.userSuggestionsLoad实现，因为它是生命周期钩组件初始化期间调用。在这里我们需要实现主题，因为它是可观察的，并且我们通常只注册一次观察值，当它发生任何变化时它会被调用。

现在，如果你需要的子组件内的实施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生命周期钩组件后，负荷高达叫。

lyfecycle钩

的顺序有关它的详细信息Link

如果你要放置load之外你必须把它认为是手动触发的方法中由用户从模板或任何其他组件。

[或在其他生命周期钩事件]

UDPATE

如果要手动触发需要像

call(){ 
// the body 
} 

创建在组件的方法的功能

并从模板或任何其他组件调用此项，如

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

或

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