Question

我已经声明了一个有两个对象数组的类。阵列由来自后端的信息填充。我使用Observable和Http从后端获取信息。全局类在module.ts文件的provider数组中声明，因此它在最高点声明。在其中一个顶级组件中，我订阅了服务以在ngOnInit方法中填充数组。数据数组服务类注入组件的构造函数中。我看到数组在这个类中填充了正确的信息。但是当我在子组件中注入相同的服务类时，所有数组都为null。为什么？有没有办法保留更新的值？请帮忙。

这是我的代码：

全局类AdminProductDisplayInfo（此类已添加到app.module.ts文件中的提供程序数组中

// admin-product-display-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中实际存储任何数据，您必须拥有构造函数和函数。但是，强烈建议您跳过该选项并改为 Angular way 。

如果您确实想要在组件之间共享数据，则可以使用@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。

如果您的孩子使用router-outlet显示，shared service would be the way to go使用Observables（通常）。在您的情况下，父级将发出数据，子级将订阅数据。根据您的情况，您可能希望使用某种类型的Subject。

希望这会有所帮助，并仔细查看Input和共享服务，有很好的例子，比我在这里解释的更接近;）

全局变量不保留角度2中从一个组件到另一个组件的更新值

1 个答案: