Question

以下是我的project.service.ts

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

@Injectable()

export class ProjectService {
    public profskills_value = " Test ";
}

从component1.ts我正在为profskills_value变量分配一个值，如下所示：

....
export class ProfskillsPage {

  constructor(public service: ProjectService , public navCtrl: NavController, public navParams: NavParams) {

  }

save(){
  this.service.profskills_value = this.skills;
  console.log(this.service.profskills_value);
}
...

现在，当我尝试从控制台日志中的component2.ts读取值时，它会显示Test而不是我component1.ts指定的值。

请指导我做错了什么？

PS：编辑1 - 复制我的完整ts文件

profskills.ts我在哪里分配值

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { ProjectService } from '../project.service';

/**
 * Generated class for the ProfskillsPage page.
 *
 * See http://ionicframework.com/docs/components/#navigation for more info
 * on Ionic pages and navigation.
 */
//@IonicPage()
@Component({
  selector: 'page-profskills',
  templateUrl: 'profskills.html',
  providers: [ProjectService]
})
export class ProfskillsPage {

  skills='';

  constructor(public service: ProjectService , public navCtrl: NavController, public navParams: NavParams) {

  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad ProfskillsPage');
  }


save(){
  //console.log(this.skills);

  this.service.profskills_value = this.skills;
  console.log(this.service.profskills_value);
}

}

pinfo.ts我试图读取该值，但结果是服务中的硬编码值为test，而不是来自profskills.ts的指定值

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { ProjectService } from '../project.service';

/**
 * Generated class for the ProfskillsPage page.
 *
 * See http://ionicframework.com/docs/components/#navigation for more info
 * on Ionic pages and navigation.
 */
//@IonicPage()
@Component({
  selector: 'page-profskills',
  templateUrl: 'profskills.html',
  providers: [ProjectService]
})
export class ProfskillsPage {

  skills='';

  constructor(public service: ProjectService , public navCtrl: NavController, public navParams: NavParams) {

  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad ProfskillsPage');
  }


save(){
  //console.log(this.skills);

  this.service.profskills_value = this.skills;
  console.log(this.service.profskills_value);
}

}

Answer 1

从appModule

中的每个组件添加中删除ProjectService

providers: [ProjectService]

如果在每个模块中提供服务，angular将创建新实例。

阅读以下链接以了解更多信息

Service constructor getting called every time I use it in a component

你可以跟随这个gudie。 https://angular.io/guide/component-interaction#parent-and-children-communicate-via-a-service

Answer 2

尝试使用getter和setter。

class ProjectService {
    private _profskills_value:string = ' TEST ';

    get profskills_value():string {
          return this._profskills_value ;
    }

    set profskills_value ( value:string) {   
    // Plugin some processing here    
     this._profskills_value = value 
    }
}

使用服务在两个组件之间共享数据不起作用

2 个答案: