angular2中具有子类和父类维护的数据流

我有persons父类，它有多个人子类和一些属性。在主页中，我有一个打开个人页面的链接。当我点击链接时，默认情况下我可以打开个人信息页面。用户可以添加或删除此人。当我提交页面时，它将通过保存数据数组重定向到主页

我这里的问题是，当我提交时，我在其中添加了个人详细信息，如果我再次从主页单击个人页面，默认情况下，我应该恢复原始详细信息。到目前为止，当我在数据输入之前单击时，我可以看到相同的页面。表示我添加的所有数据都已重新初始化。我也用“static”声明了这些东西。请看下面的代码

下面是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']);
}
}

@组件({
选择器：“personinvolved”，
templateUrl:'app/modules/person/personinvolved.template.html'，
指令：[个人指令]
})
导出类PersonInvolvedComponent{
private mainArray=新数组（）；
静态人员：数组=[]；
构造函数（专用路由器：路由器，专用_globalService:globalService，专用el:ElementRef）{
if（PersonInvolvedComponent.persons.length==0）{
PersonInvolvedComponent.persons.push（新PersonDirective（））；
}
}
找人（）{
返回PersonVolvedComponent.persons；
}
addPerson（）{
PersonInvolvedComponent.persons.push（新PersonDirective（））；
}
removePerson（索引）{
PersonInvolvedComponent.persons.拼接（索引1）；
}
onFormSubmit（事件）{
$（this.el.nativeElement）.find（“person指令”）.each（（i，val）=>{
this.mainArray[i]=新数组（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（“#addinfo选择”）.val（）；
this.mainArray[i][8]=$（val.find（“#nameSelect”）.val（）；
this.mainArray[i][9]=$（val.find（“#别名选择”）.val（）；
});
this._globalService.setPageData（this.main数组，'person'）；
这个.router.navigate（['step1']）；
}
}

---

因此，通过单击提交，所有亲自输入的数据将保存在服务中，并重定向到step1 ie主页。当我再次单击主页中的person链接时，person页面将成为默认页面，而没有任何以前输入的数据。有人可以建议我如何维护它，直到我从主页提交为止。

如果您将数据移动到根作用域（

AppModule

）中提供的共享服务或导航时未从DOM中删除的其他组件，则数据保持可用

@Injectable（）
导出类MyService{
//这里的数据属性
private mainArray=新数组（）；
静态人员：数组=[]；
}

@NgModule({
提供者：[浏览器模块，MyService，/*其他提供者*/]，
...
})
导出类AppModule{}

导出类PersonInvolvedComponent{
构造函数（私有myService:myService私有路由器：路由器，私有
_globalService:globalService，专用el:ElementRef）{
if（this.myService.persons.length==0）{
this.myService.persons.push（newpersondirective（））；
}
}
找人（）{
返回this.myService.persons；
}
addPerson（）{
this.myService.persons.push（newpersondirective（））；
}
removePerson（索引）{
this.myService.persons.splice（索引1）；
}
onFormSubmit（事件）{
$（this.el.nativeElement）.find（“person指令”）.each（（i，val）=>{
this.myService.mainArray[i]=新数组（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（“#addinfo选择”）.val（）；
this.myService.mainArray[i][8]=$（val.find（“#nameSelect”）.val（）；
this.myService.mainArray[i][9]=$（val.find（“#别名选择”）.val（）；
});
this._globalService.setPageData（this.myService.mainArray，'person'）；
这个.router.navigate（['step1']）；
}

我已经添加了服务组件并导入了PersonDirect。但是我遇到了一个错误“无法解析PersonDirect的所有参数：？”我不明白您试图用

PersonDirect

实现什么，但是用

新建
创建组件或指令（
新建PersonDirect（）
）是没有意义的。Angular需要自己创建这些实例。实际上它是一个子类人员。该错误是我的服务中的injector的问题。因此我为此创建了单独的服务。我现在没有收到任何错误。但数据没有保留。它正在初始化新页面。您在哪里将服务添加到
提供者：[…]
？