Angular 2 http可以被觀察到被調用兩次

Question

在Angular 2 v2.0.1中，onInit被調用兩次。 （很明顯，我也做一些錯誤的，當它被稱爲一次，但現在這不是問題）

這裏是我的Plunker：http://plnkr.co/edit/SqAiY3j7ZDlFc8q3I212?p=preview

這裏的服務代碼：

import {Injectable} from '@angular/core'; 
import {Http, Response} from '@angular/http'; 
import {Observable} from 'rxjs/Rx'; 
import 'rxjs/add/operator/map'; 
import 'rxjs/add/operator/do'; 

@Injectable() 
export class DemoService { 


    constructor(private http:Http) { } 

    // Uses http.get() to load a single JSON file 
    getData() { 
    return this.http.get('./src/data.json') 
     .map((res:Response) => res.json()) 
     .do(data => console.log(data)) 
     .subscribe(data => { 
     return <PageContent[]>data; 
     }, error => console.log("there was an error!")); 
    } 
} 

export class PageContent { 
    constructor(public _id: string, 
    public tag: string, 
    public title: string, 
    public body?:string, 
    public image?: string) {} 
} 

...以及使用它的簡單組件。

//our root app component 
import {Component, NgModule, OnInit } from '@angular/core' 
import {BrowserModule} from '@angular/platform-browser' 
import { DemoService, PageContent } from './service'; 
import { HttpModule } from '@angular/http'; 

@Component({ 
    selector: 'my-app', 
    template: ` 
    <div> 
     <h2>Hello {{name}}</h2> 
    </div> 
    <div *ngFor="let page of pages"> 
     {{ page.title }} 
    </div> 
    ` 
}) 
export class App implements OnInit { 
    name:string; 
    pages: PageContent[] = []; 

    constructor(private _service: DemoService) { 
    this.name = 'Angular2' 
    this.loadData(); // <-- this is called once 
    } 

    ngOnInit() { 
    //this.loadData(); // <-- this is called twice 
    } 

    loadData(){ 
    this.pages = this._service.getData(); 
    console.log(this.pages); 
    } 
} 

@NgModule({ 
    imports: [ BrowserModule, HttpModule ], 
    declarations: [ App ], 
    providers: [DemoService], 
    bootstrap: [ App ] 
}) 
export class AppModule {} 

免責聲明：它的示數出來，但你可以看到它被服務一次當正在從構造稱爲服務方法，但它被調用兩次當它是ngOnInit鉤內。

我的問題是，爲什麼它被從OnInit函數調用兩次？

UPDATE：解決所有的答案：

這是新的服務方法：

getData() { 
    return this.http.get('./src/data.json') 
     .map((res:Response) => res.json() as PageContent[]); 
} 

...這是新組件的方法：

loadData(){ 
    this._service.getData() 
     .subscribe(data => this.pages = data); 
} 

Answer 1

您的subscribe應該放在組件中而不是服務中。您的組件的原因是訂閱從服務返回的數據，稍後您可以取消訂閱或在需要時添加更多控制（例如譴責）。更改後代碼將如下所示。

在您的組件：

ngOnInit() { 
    this.loadData(); 
    } 



    loadData(){ 
    this._service.getData().subscribe(data => this.pages = data); 
    } 

在您服務：

getData() { 
    return this.http.get('./src/data.json') 
     .map((res:Response) => res.json()); 
    } 

Answer 2

this._service.getData()返回主題，而不是PageContent列表。你可以改變你loadData這樣的：

loadData() { 
    this._service.getData().subscribe(data => this.pages = data); 
    console.log("Load data !"); 
} 

和（從DemoService）刪除您getData方法subscribe一部分。我剛剛測試過這個，並且ngOnInit被調用一次

Answer 3

在英語中，當您訂閱流（Observable）的第一個函數裏面的代碼裏面的訂閱塊會當可觀察者發射數據時執行。

如果您訂閱兩次將被調用兩次，等

因爲您訂閱多次認購塊內的第一功能（稱爲下一個函數）將被執行多次。

您應該只在ngOnInit內訂閱一次流。

當您想要將數據發送到流上時，您可以使用RXJS主體進行此操作，並使主體隨後使用RXJS平面映射發送到您訂閱的流。

Answer 4

確定我的第二個答案......看看這有助於...

return subject.asObservable().flatMap((emit: any) => { 

    return this.http[method](url, emit, this.options) 
    .timeout(Config.http.timeout, new Error('timeout')) 
    // emit provides access to the data emitted within the callback 
    .map((response: any) => { 
     return {emit, response}; 
    }) 
    .map(httpResponseMapCallback) 
    .catch((err: any) => { 
     return Observable.from([err.message || `${err.status} ${err.statusText}`]); 
    }); 
}).publish().refCount(); 

，其中主題是，你要發射（與subject.next（）方法）的RXJS主題