通过 Angular 2 服务传递数据答案

【问题标题】：Passing data via an Angular 2 service通过 Angular 2 服务传递数据
【发布时间】：2017-03-28 15:58:29
【问题描述】：

我正在努力将数据从 Angular 服务传递到组件。我从一个简单的模型类（./cet.model）开始

export class CetModel {
constructor(
    public waferDiameter: number = 10
    ) {}
}

然后定义一个角度服务（./cet.service）；

import { CetModel } from './cet.model';

export class CetService {
    private cet: CetModel;

    getCet() {
    return this.cet;
    }      
}

以及相关的角度分量；

import { Component } from '@angular/core';

import { CetService } from './cet.service';
import { CetModel } from './cet.model';

@Component({
    selector: 'cet-input',
    templateUrl: './cet-input.component.html',
    providers: [ CetService ]
})

export class CetInputComponent {
   constructor(public cetService: CetService){}
   cet: CetModel = this.cetService.getCet();
   waferDiameter = this.cet.waferDiameter
}

代码构建没有错误，但是当我尝试在组件的模板中显示变量“waferDiameter”时收到错误；

“无法读取未定义的属性 'waferDiameter'”。

我哪里出错了？

谢谢

【问题讨论】：

我相信你在waferDiameter前面缺少“this”这个词，或者换句话说，试试this.waferDiameter = this.cet.waferDiameter，如果你的waferDiameter是声明的，那当然是正确的在组件类中归档
嗨。感谢您的反馈。如果我将 angular 组件代码编辑为“this.waferDiameter = this.cet.waferDiameter”，则会收到以下 Linter 和 Build 错误 - “意外令牌。预期有构造函数、方法、访问器或属性”。

标签： angular2-services

【解决方案1】：

如下更改 cet.service 中的代码：

import { CetModel } from './cet.model';

    export class CetService {
        private cet = new CetModel();

        getCet() {
        return this.cet;
        }      
    }

您尚未创建模型对象。这就是为什么this.cetreturns undefined 而你得到waferDiameter undefined。

【讨论】：

我尝试了您建议的编辑。我得到 linter 并构建错误 - “提供的参数与调用目标的任何签名都不匹配。”
我的错误 - 您的解决方案确实有效 - 最后一个错误是由不相关的错误引起的。再次感谢。