html - Angular 中的生命周期钩子(Hook)

Question

在此应用程序中有三个组件 - 员工、客户和 View 。当用户填写员工或客户表单时，他的数据应显示在 View 中。如果另一个用户以这些表单中的任何一个输入一些数据，则先前的 View 应该消失并显示新数据。但在这里，以不同形式输入新数据后，以前的数据并没有消失。我的意思是，如果我们首先输入员工数据，那么数据应显示在表单下方，之后如果我们填写客户表单，员工数据应消失，新客户数据应显示在客户来源下方。这里我使用 ngOnchanges 来检测 View 输入数据的变化。这是我的代码: https://stackblitz.com/edit/angular-dfbevl

Answer 1

删除<app-view>来自客户和员工组件并将其添加到 app.component。

尝试这样:

<强> Working Demo

app.component.html

<app-employee (dataChange)="data = $event"></app-employee>
<app-customer (dataChange)="data = $event"></app-customer>


<app-view [getData]="data"></app-view>

employee.component.ts 和 customer.component

@Output() dataChange = new EventEmitter();

 onSubmit(){
   this.submitted=true;
   this.data = this.diagonastics;
   this.dataChange.emit(this.data)
   this.employeeForm.reset();
 }