angular2の子クラスと親クラスのメンテナンスを伴うデータフロー

Question

私は親のクラスを持ち、いくつかのプロパティを持つ複数のpersonの子クラスを持っています。ホームページには人のページを開くためのリンクがあります。私がリンクをクリックすると、デフォルトで人物情報を持つ人物ページを開くことができました。ユーザーはその人を追加または削除することができます。ページを送信すると、データの配列を保存してホームページにリダイレクトされます。

ここに私の問題は、私が提出したときにそれに人の詳細が追加されていて、私がホームページからもう一度人のページをクリックすると、私はデフォルトで元の細部を取り戻すべきです。私はデータ入力の前にクリックしたときに同じページを見ることができます。私がそれを追加したすべてのデータを再初期化することを意味します。私も静的なものを宣言しました。以下のコードを見てください。

下記のHTMLコード..

<div id="personsDetails"> 
    <person-directive *ngFor="let person of persons; let idx = index" (remove) = "removePerson(idx)"> 
    </person-directive> 
</div> 

者コンポーネントは以下の通りです...

@Component({ 
    selector: 'personinvolved', 
    templateUrl: 'app/modules/person/personinvolved.template.html',  
    directives: [PersonDirective] 
}) 

export class PersonInvolvedComponent { 
private mainArray = new Array(); 

static persons: Array<PersonDirective> = []; 

constructor(private router: Router, private _globalService:GlobalService, private el: ElementRef) {  
    if(PersonInvolvedComponent.persons.length == 0) { 
     PersonInvolvedComponent.persons.push(new PersonDirective()); 
    } 
} 
get persons(){ 
    return PersonInvolvedComponent.persons; 
} 
addPerson() { 
    PersonInvolvedComponent.persons.push(new PersonDirective()); 
} 

removePerson(index) { 
    PersonInvolvedComponent.persons.splice(index,1); 
} 

onFormSubmit(event) { 
    $(this.el.nativeElement).find("person-directive").each((i,val) => { 
     this.mainArray[i] = new Array(10); 
     this.mainArray[i][0] = $(val).find("#raceSelect").val(); 
     this.mainArray[i][1] = $(val).find("#genderSelect").val(); 
     this.mainArray[i][2] = $(val).find("#ageSelect").val(); 
     this.mainArray[i][3] = $(val).find("#heightSelect").val(); 
     this.mainArray[i][4] = $(val).find("#buildSelect").val(); 
     this.mainArray[i][5] = $(val).find("#eyeColorSelect").val(); 
     this.mainArray[i][6] = $(val).find("#hairColorSelect").val(); 
     this.mainArray[i][7] = $(val).find("#addInfoSelect").val(); 
     this.mainArray[i][8] = $(val).find("#nameSelect").val(); 
     this.mainArray[i][9] = $(val).find("#aliasNameSelect").val(); 
    }); 
    this._globalService.setPageData(this.mainArray,'person'); 
    this.router.navigate(['step1']); 
} 
} 

だから、人に入力されたすべてのデータがサービスに保存され、STEP1、すなわちホームにリダイレクトされる提出クリックして、ページ。ホームページで人のリンクをもう一度クリックすると、以前入力したデータを持たずに人のページがデフォルトになります。私はホームページから提出するまで、どのように私はそれを維持することができますか誰かが私に示唆してくれる？

Answer 1

ルートスコープ（AppModule）またはナビゲートするときにDOMから削除されていない他のいくつかのコンポーネントで提供されている共有サービスにデータを移動する場合は、データが利用可能とどまります。

@Injectable() 
export class MyService { 
    // data properties here 
    private mainArray = new Array(); 

    static persons: Array<PersonDirective> = []; 
} 

@NgModule({ 
    providers: [BrowserModule, MyService, /* other providers */], 
    ... 
}) 
export class AppModule {} 

export class PersonInvolvedComponent {  
    constructor(private myService:MyService private router: Router, private 
_globalService:GlobalService, private el: ElementRef) { 
    if(this.myService.persons.length == 0) { 
     this.myService.persons.push(new PersonDirective()); 
    } 
} 
get persons(){ 
    return this.myService.persons; 
} 
addPerson() { 
    this.myService.persons.push(new PersonDirective()); 
} 

removePerson(index) { 
    this.myService.persons.splice(index,1); 
} 

onFormSubmit(event) { 
    $(this.el.nativeElement).find("person-directive").each((i,val) => { 
     this.myService.mainArray[i] = new Array(10); 
     this.myService.mainArray[i][0] = $(val).find("#raceSelect").val(); 
     this.myService.mainArray[i][1] = $(val).find("#genderSelect").val(); 
     this.myService.mainArray[i][2] = $(val).find("#ageSelect").val(); 
     this.myService.mainArray[i][3] = $(val).find("#heightSelect").val(); 
     this.myService.mainArray[i][4] = $(val).find("#buildSelect").val(); 
     this.myService.mainArray[i][5] = $(val).find("#eyeColorSelect").val(); 
     this.myService.mainArray[i][6] = $(val).find("#hairColorSelect").val(); 
     this.myService.mainArray[i][7] = $(val).find("#addInfoSelect").val(); 
     this.myService.mainArray[i][8] = $(val).find("#nameSelect").val(); 
     this.myService.mainArray[i][9] = $(val).find("#aliasNameSelect").val(); 
    }); 
    this._globalService.setPageData(this.myService.mainArray,'person'); 
    this.router.navigate(['step1']); 
}