生命周期挂钩

Question

在此应用中，包含三个组件：员工，客户和视图。当用户填写员工或客户表格时，其数据应显示在视图中。并且，如果另一个用户以上述两种形式之一输入某些数据，则前一个视图应消失，显示新数据。但是在这里，以其他形式输入新数据后，先前的数据不会消失。我的意思是，如果我们首先输入Employee数据，则数据应显示在表格下方，然后，如果我们填写客户表格，则Employee数据应消失，新客户数据应显示在customer from下面。在这里，我使用了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();
 }