Question

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

我的问题是，当我提交并且我在其中添加了人员详细信息时，如果我再次从主页单击人员页面，我应该默认重新获得原始详细信息。当我在数据输入之前点击时，我可以看到相同的页面。意味着我添加的每个数据都重新初始化。我用＆＃34;静态＆＃34;声明了这些东西。也。请看下面的代码。

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

具有子角色和父类维护的数据流以angular2

1 个答案: