Javascript 在服务器上提交后，如何重新加载组件？

我正在使用nodejs和angular2进行一个简单的项目。 在我的客户机项目中，我有一个组件，它有一个表单和一个提交事件。当我抛出此事件时，表单中的所有数据都会正确发送到我的节点应用程序。 但我有另一个组件，它有一个表，我列出了数据库中的所有寄存器

一切正常。但我应该在发送提交后的同一时间加载表。 我不知道该怎么做

我试着实现如下内容：

export class EmployeeListComponent implements OnInit {

  public employees: string[];

  constructor(private employeeService : EmployeeService) {
    this.employeeService.employeeRequest().subscribe(employees => {
      this.employees = employees;
    })
   }

  ngOnInit() {

  }

}

export class EmployeeListComponent implements OnInit {

  public employees: string[];

  constructor(private employeeService : EmployeeService) { }

  ngOnInit() {
    this.loadAllEmployees();
  }

  loadAllEmployees() {
    this.employeeService.employeeRequest().subscribe(data => {
      this.employees = data;
    });
  }
}

export class EmployeeRegisterComponent {

public name: string;
  public familyName: string;
  public participation: number;
  public alertMsg: any;
  public employees: string[];

constructor(private validateService : ValidateService,
              private registerService : EmployeeService,
              private employeeService : EmployeeService) {
                this.dashCall();
              }

  onRegister(){
    const Employee = {
      name : this.name,
      familyName: this.familyName,
      participation: this.participation
    }
    if (!this.validateService.validateRegister(Employee)){
      this.alertMsg = JSON.stringify({'msg': 'All fields must be filled'});
      return false;
    } else {
      this.registerService.employeeRegister(Employee).subscribe(data => {
        this.alertMsg = JSON.stringify({'msg': 'Employee registered successfully'});
        this.dashCall();
    });
    };
  };

  dashCall(){
    this.employeeService.employeeRequest().subscribe(employees => {
      this.employees = employees;
    });

  }
}

在我的寄存器组件中，我使用了以下方法：

onRegister(){
    const Employee = {
      name : this.name,
      familyName: this.familyName,
      participation: this.participation
    }
    if (!this.validateService.validateRegister(Employee)){
      this.alertMsg = JSON.stringify({'msg': 'All fields must be filled'});
      console.log(this.alertMsg);
      return false;
    } else {
      this.registerService.employeeRegister(Employee).subscribe(data => {
        this.alertMsg = JSON.stringify({'msg': 'Employee registered successfully'});
        console.log(this.alertMsg);
        return this.router.navigate(['/list']);
      });
    };
  };

我的测试表明，我的代码工作正常，但我的表在第一次提交时加载正确。之后，我必须手动刷新浏览器以再次加载我的表。

---

是否有人知道我做错了什么，或者可以告诉我一些编码方法？

尝试将构造函数更改为函数，然后在ngOninit上调用它，因此每次列表组件初始化时，都会再次加载员工列表，类似这样：

export class EmployeeListComponent implements OnInit {

  public employees: string[];

  constructor(private employeeService : EmployeeService) {
    this.employeeService.employeeRequest().subscribe(employees => {
      this.employees = employees;
    })
   }

  ngOnInit() {

  }

}

export class EmployeeListComponent implements OnInit {

  public employees: string[];

  constructor(private employeeService : EmployeeService) { }

  ngOnInit() {
    this.loadAllEmployees();
  }

  loadAllEmployees() {
    this.employeeService.employeeRequest().subscribe(data => {
      this.employees = data;
    });
  }
}

export class EmployeeRegisterComponent {

public name: string;
  public familyName: string;
  public participation: number;
  public alertMsg: any;
  public employees: string[];

constructor(private validateService : ValidateService,
              private registerService : EmployeeService,
              private employeeService : EmployeeService) {
                this.dashCall();
              }

  onRegister(){
    const Employee = {
      name : this.name,
      familyName: this.familyName,
      participation: this.participation
    }
    if (!this.validateService.validateRegister(Employee)){
      this.alertMsg = JSON.stringify({'msg': 'All fields must be filled'});
      return false;
    } else {
      this.registerService.employeeRegister(Employee).subscribe(data => {
        this.alertMsg = JSON.stringify({'msg': 'Employee registered successfully'});
        this.dashCall();
    });
    };
  };

  dashCall(){
    this.employeeService.employeeRequest().subscribe(employees => {
      this.employees = employees;
    });

  }
}

另请参阅Angular life cycle hooks文档，以了解有关ngOnInit和其他方面的更多信息：

---

嗯。在我得到建议后，我尝试了另一种策略。首先，我将两个组件简化为一个组件。然后，我将逻辑从构造函数移到一个名为dashCall的方法，我在构造函数内部和onRegister方法的final中调用该方法

最后的代码如下所示：

export class EmployeeListComponent implements OnInit {

  public employees: string[];

  constructor(private employeeService : EmployeeService) {
    this.employeeService.employeeRequest().subscribe(employees => {
      this.employees = employees;
    })
   }

  ngOnInit() {

  }

}

export class EmployeeListComponent implements OnInit {

  public employees: string[];

  constructor(private employeeService : EmployeeService) { }

  ngOnInit() {
    this.loadAllEmployees();
  }

  loadAllEmployees() {
    this.employeeService.employeeRequest().subscribe(data => {
      this.employees = data;
    });
  }
}

export class EmployeeRegisterComponent {

public name: string;
  public familyName: string;
  public participation: number;
  public alertMsg: any;
  public employees: string[];

constructor(private validateService : ValidateService,
              private registerService : EmployeeService,
              private employeeService : EmployeeService) {
                this.dashCall();
              }

  onRegister(){
    const Employee = {
      name : this.name,
      familyName: this.familyName,
      participation: this.participation
    }
    if (!this.validateService.validateRegister(Employee)){
      this.alertMsg = JSON.stringify({'msg': 'All fields must be filled'});
      return false;
    } else {
      this.registerService.employeeRegister(Employee).subscribe(data => {
        this.alertMsg = JSON.stringify({'msg': 'Employee registered successfully'});
        this.dashCall();
    });
    };
  };

  dashCall(){
    this.employeeService.employeeRequest().subscribe(employees => {
      this.employees = employees;
    });

  }
}

---

我知道这不是实现这一目标的最佳方式。但最终我得到了我所需要的。

你可以调用recall your employeeRequest重新填充，而不是进行页面刷新。employees=employees；你好，谢谢你的回答。但这只是另一个问题。如果您再次看到我的代码，我将在构造函数内部调用employeeRequest。我对客户端略知一二，知道每个组件在构造函数的生命周期中都有自己的生命周期。那么，您如何建议我在哪里可以回忆我的employeeRequest？您可以将调用移动到它自己的方法中。然后从构造函数和employeeRegister.subscribe的成功回调调用它。作为旁注，我将把api调用移到ngOnit方法而不是构造函数。通常更安全的做法是保持构造函数精简，并将您的逻辑转移到它中。这是因为angular控制调用ngOnit的时间。除非销毁并重新初始化组件，否则不会再次调用ngOnit生命周期。成功注册用户后需要调用loadAllEmployees。我尝试了这两种建议，但代码无法正常工作。第一次提交表单时，我会自动获取列表，但如果第二次尝试，我的列表不会加载。我必须手动刷新浏览器才能看到结果。还有其他建议吗？