您可以使用@Input https://angular.io/api/core/Input and @Output https://angular.io/api/core/Output装饰器实现所需的输出:
Changes:
在父组件中:
HTML 代码:
<div>
<table *ngIf="isVisible === true">
<tr>
<th>
Id
</th>
<th>
name
</th>
<th>
username
</th>
<th>
email
</th>
</tr>
<tr *ngFor="let data of userInformation">
<td>{{data.id}}
</td>
<td>{{data.name}}
</td>
<td>{{data.username}}
</td>
<td>{{data.email}}
</td>
<td>
<a (click)="onSelect(data)">Go to
</a>
</td>
</tr>
</table>
<div *ngIf="isVisible === false">
<app-test-child [userInfo]="clickedUser" (notify)="backToList($event)"></app-test-child>
</div>
</div>
TS Code:
局部变量:
userInformation: any;
isVisible : boolean = true;
clickedUser: any;
父组件中的两个函数:
onSelect(data)
{
this.isVisible = false;
this.clickedUser = data;
}
backToList(flag) {
this.isVisible = flag;
console.log(flag)
}
在子组件中:
HTML 代码:
<table>
<tr>
<th>
Id
</th>
<th>
name
</th>
<th>
username
</th>
<th>
email
</th>
</tr>
<tr>
<td>{{clickedUser.id}}
</td>
<td>{{clickedUser.name}}
</td>
<td>{{clickedUser.username}}
</td>
<td>{{clickedUser.email}}
</td>
<td>
<a (click)="backToList()">Back
</a>
</td>
</tr>
</table>
TS Code:
import { Component, OnInit, Input, EventEmitter, Output } from '@angular/core';
@Input() userInfo: any;
@Output() notify: EventEmitter<any> = new EventEmitter<any>();
clickedUser: any;
constructor() { }
ngOnInit() {
this.clickedUser = this.userInfo;
}
backToList() {
var flag = true;
this.notify.emit(flag);
}