全局變量不保留角度2中的一個組件的更新值

Question

我已經聲明瞭一個具有兩個對象數組的類。數組被後端的信息填充。我使用Observable和Http從後端獲取信息。全局類在module.ts文件的提供程序數組中聲明，因此它在最高點處聲明。在其中一個頂級組件中，我正在訂購該服務以填充ngOnInit方法中的數組。在組件的構造函數中注入的數據數組服務類。我看到這個數組中正確的信息填充了數組。但是當我在子組件中注入相同的服務類時，所有數組都是空的。爲什麼？有沒有辦法保留更新的值？請幫忙。

這裏是我的代碼：

全球一流AdminProductDisplayInfo（本類添加到app.module.ts提供商陣列文件

//管理產品 - 顯示info.ts

import { ComponentGroupDisplayInfo } from './component-group-display'; 
import { ServiceCatDisplayInfo } from './service-cat-display-info'; 

export class AdminProudctDisplayInfo { 
     public cgc_info_list: ComponentGroupDisplayInfo[] = []; 
     public service_cat_info_list: ServiceCatDisplayInfo[] = [] 
} 

//服務從後端獲取數據

import { AdminProudctDisplayInfo } from '../models/admin-product-display-info'; 

@Injectable() 
export class BagProductService { 

private backendURL = 'http://localhost:8080/BAG'; 

    constructor (private http: Http) {} 

    /* This method gets the data necessary to display from backend */ 
    getAdminProductDisplayInfo(): Observable<AdminProudctDisplayInfo> { 

     let adminURL = this.backendURL.concat('/admin/getAdminProudctDisplayInfo'); 
     let body = JSON.stringify(""); 
     let headers = new Headers({'Content-type': 'application/json'}); 
     let options = new RequestOptions({headers: headers}); 

     return this.http.post(adminURL, body, options) 
         .map(this.extractData) 
         .catch(this.handleError); 
    } 

} 

//元器件從中BagProductService和AdminProductDisplayInfo將用於訂閱和獲取數據，其中數據將被用於顯示上述組分的

import { BagProductService } from '../services/adminBagProduct.service'; 
import { ServiceCatDisplayInfo } from '../models/service-cat-display-info'; 

@Component({ 
    selector: 'admin-add-bag-Product', 
    templateUrl: './admin-add-bag-product.html' 
}) 
export class AdminAddBagProduct implements OnInit { 

    constructor(private router: Router, 
       private bagProdService: BagProductService, 
       private adminProdDispInfo: AdminProudctDisplayInfo) {} 

    ngOnInit() { 
      this.bagProdService.getAdminProductDisplayInfo().subscribe(
       data => {this.adminProdDispInfo = data; console.log("data received: ", data)}, 
       error => {this.errorMessage = <any>error, console.log("Error Message: ", this.errorMessage)}); 
    } 

//Here I see data being populated from backend and everything looks good. 

} 

//子組件，而是一切爲空這裏。

import { BagProductService } from '../services/adminBagProduct.service'; 

@Component({ 
    selector: 'admin-add-bag-component', 
    templateUrl: './admin-add-bag-component.html' 
}) 
export class AdminAddBagComponent { 

    constructor(private router: Router, private bagProdService: BagProductService, private adminProdDispInfo: AdminProudctDisplayInfo) { 

     console.log("in Component display: ", this.adminProdDispInfo.cgc_info_list); 

    // Here this.adminProdDispInfo.cgc_info_list and other array is null. 
    } 

} 

Answer 1

你已經得到了這一點倒退。 AdminProudctDisplayInfo不包含任何數據，您剛剛將其聲明爲您正在接收的數據的模型（類似於interface）。要實際存儲任何數據在那class你必須有構造函數和函數。但是，我強烈建議你跳過該選項，並做它角度的方式而不是。

如果您實際上想要在組件之間共享數據，則可以使用@Input如果父級在模板中具有子標記。然後，你會訂閱父的http請求，在這裏變量如叫data對象數組分配數據並傳遞給孩子，像這樣：

<admin-add-bag-component [data]="data"></admin-add-bag-component> 

和兒童使用@Input，有在data數據，這些數據則可以在模板中使用：

在TS：

@Input() data: Object[]; 

查看：

<div *ngFor="let d of data">{{d.name}}</div> 

下面我們仔細看看上面的選項：Pass data from parent to child with input binding。

如果您的孩子使用Observables（通常）使用router-outlet，shared service would be the way to go顯示。在你的情況下，父母會發出數據，而孩子會訂閱數據。根據你的情況，你會想使用某種類型的Subject。

希望這會有所幫助，並採取在Input和共享服務的密切關注，也有很好的實例來講解，更接近比我在這裏解釋;）