Question

我的服务'MySharedService'中有一个数据，其值为'MyOutputTemp'。我希望在组件加载时在组件中显示它。

这是我的组件：

@Component({

    template: `....
                <p>{{MyOutputHere}}
                .....`

    providers: [MySharedService]

})

export class MyOutputComponent implements OnInit{

    MyOutputHere: string;

    constructor (private _mySharedService: MySharedService){}

    ngOnInit(){
        console.log('Getting value from the service: ' + this._mySharedService.MyOutputTemp); //says undefined
        this.MyOutputHere = this._mySharedService.MyOutputTemp;
        console.log('Value in the component: ' +this.MyOutputHere);//says undefined

    }
}

这是我的服务：

@Injectable()
    export class MySharedService{

        MyOutputTemp: string;

        assignOutput(incomingParameter: string){

            this.MyOutputTemp = incomingParameter;
            console.log('Assigned value: ' + this.MyOutputTemp);
            //the value is successfully assigned and I can get a print 

        } //I am calling it in another component. It is successfully assigning the value. Consider MyOutputTemp has value now.

    }

我尝试过：使用ngOnInit（）从服务中获取值，并将其放入“MyOutputHere”中。会发生什么：{{MyOutputHere}}没有显示任何价值。如果我在控制台中打印该值，则表示“未定义”。

这在概念上有什么问题？而且，如何从服务中获取MyOutputTemp的值并将其显示在组件中？

Answer 1

您应该将服务中的MyOutputTemp变量设为static变量。

例如：

@Injectable()
export class MySharedService{

    static MyOutputTemp: string;

    assignOutput(incomingParameter: string){

        MySharedService.MyOutputTemp = incomingParameter;

    }
}

在组件中：

export class MyOutputComponent implements OnInit{

    MyOutputHere: string;

    constructor (private _mySharedService: MySharedService){}

    ngOnInit(){
        console.log('Getting value from the service: ' + MySharedService.MyOutputTemp);
        this.MyOutputHere = MySharedService.MyOutputTemp;
        console.log('Value in the component: ' +this.MyOutputHere);
    }
}

原因是每个组件都会注入一个新的服务实例。使varible static确保它在所有实例中都是相同的。

干杯！

从服务中获取数据并在加载/呈现时在组件中显示它：Angular2

1 个答案: