以下

Question

を働いていない2つのコンポーネント間でデータを共有するためのサービスを使用すると、下図のように、私はprofskills_value変数の値を代入していますcomponent1.tsから私のproject.service.ts

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

@Injectable() 

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

です：

.... 
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と表示されます。

私が間違っていることを指導してください。

PS：編集1 - 私は値を読み取るしようとしている値

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を割り当てていますどこ

profskills.tsの下に私の完全な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

ゲッターとセッターを試してみてください。

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 
    } 
} 

Answer 2

各モジュール角度意志で提供するサービスは、新しいインスタンスを作成する場合appModule

providers: [ProjectService] 

に追加各成分からProjectServiceを削除。

は、あなたがこのgudieに従うことができ

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

の詳細情報を理解するためのリンクの下にお読みください。 https://angular.io/guide/component-interaction#parent-and-children-communicate-via-a-service