サーバーでサブミットした後、コンポーネントをリロードするにはどうすればよいですか？

Question

私はノード2と角度2を使って簡単なプロジェクトを進めています。 私のクライアントプロジェクトでは、フォームと送信イベントを持つコンポーネントがあります。このイベントをスローすると、フォームのすべてのデータがノードアプリケーションに適切に送信されます。 しかし、データベースにあるすべてのレジスタを一覧表示するテーブルがある別のコンポーネントがあります。

すべて正常です。しかし、私は提出書類を送った後、同時にテーブルを読み込まなければなりません。 私はこれをどのように行うことができるのか分かりません。

私はこのような何かを実装してみました：

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

私のテスト

は私のコードは正常に動作しますが、私のテーブルだけで正常にロードすることを示しています

export class EmployeeListComponent implements OnInit { 

    public employees: string[]; 

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

    ngOnInit() { 

    } 

} 

そして、私はこの方法をした私のレジスタコンポーネントで

最初に提出する。その後、ブラウザを手動でリフレッシュしてテーブルを再度ロードする必要があります。 私が間違っていることを知っている人や、それをコードする方法を教えてくれる人がいますか？

Answer 1

まあ。私は提案を得た後、別の戦略を試しました。まず、2つのコンポーネントを1つのコンポーネントとして単純化しました。次に、私のロジックをコンストラクタからdashCall（）というメソッドに移動しました。これをコンストラクタ内とonRegister（）メソッドの最後に呼び出します。

最終的なコードは次のようになります。

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

    } 
} 

私はそれがこれを実装するための最良の方法ではありません知っています。しかし、結局、私は必要なものを手に入れました。

Answer 2

てみ関数にあなたのコンストラクタを変更し、あなたが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; 
    }); 
    } 
} 

も角度見ますライフサイクルフックのドキュメントngOnInitなどについての詳細を理解する：

https://angular.io/guide/lifecycle-hooks