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