全局变量不保留角度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和共享服务的密切关注，也有很好的实例来讲解，更接近比我在这里解释;）