我很难在Angular中进行两个组件的通信,而且我看不出我犯了什么错误。角度分量通信
更具体地说,我有一个表(一个组件),我希望点击一行以打开一个模式窗口(单独的组件)与点击的行细节。我完成了模态窗口打开的所有连线,但没有显示数据。
export class TableComponent implements OnInit {
posts: Post[];
selected: any;
selectRow(post) {
this.selected = post;
document.getElementById('modalActivator').click();
}
private setPosts(posts) {
this.posts = posts;
}
constructor(
private restCallService: RestCallService
) {}
ngOnInit() {
this.restCallService.getPosts().then(posts => this.setPosts(posts))
}
}
表HTML:
<table>
<tbody>
<tr *ngFor="let post of posts;"
(click)="selectRow(post)">
<td>{{post.userId}}</td>
<td>{{post.id}}</td>
<td>{{post.title}}</td>
</tr>
</tbody>
</table>
<app-table-row-expanded> [postFromParent]="selected"</app-table-row-expanded>
的模式是不是最佳打开,但难道这是因为没有数据通信的问题?
export class TableRowExpandedComponent implements OnInit {
@Input() postFromParent: Post
constructor() {}
ngOnInit() {}
}
我会为您省去整个模态HTML。这是什么坐在模式的身体:
<p>{{postFromParent?.body}}</p>
任何帮助,将不胜感激。
PS,我采用了棱角分明的CLI与Eclipse,并且已经有一些莫名其妙的错误已经出现(运行的代码不编译,除非我关闭并重新打开该文件即但这并不觉得是这里的问题)
是“TableRowExpandedComponent”你的对话框来创建你的开法? –
从你在这里展示的代码看起来你的组件不在父子结构中。你可以看看组件交互如何工作[这里](https://angular.io/guide/component-interaction) – BogdanC
是的,“TableRowExpandedComponent”是孩子。 @BogdanC有一种关系。看看第一个HTML Snipet的最后一行。 – Thodoris