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>

我会让你省掉所有的时间。这就是模态体中的内容：

 <p>{{postFromParent?.body}}</p>

{{postFromParent？.body}

任何帮助都将不胜感激

---

另外，我在Eclipse中使用Angular CLI，已经出现了一些奇怪的错误（除非我关闭并重新打开文件ie，否则不会编译代码。但这并不是问题所在）

有很多方法可以让它按照您的意愿运行。对于模态，我最喜欢的是在模态组件中公开一个公共的open方法。这将允许您根据您喜欢的任何条件直接使用数据调用它。例如，设置可以是

export class TableComponent {
  @ViewChild('modal') modal;

  selectRow(post) {
    this.modal.open(post);
  }

}

<app-table-row-expanded #modal> [postFromParent]="selected"</app-table-row-expanded>

---

您还可以访问发布到组件的任何@输入，通常

您的对话框是“TableRowExpandedComponent”吗？从您在此处显示的代码来看，您的组件似乎不在父子结构中。您可以看看组件交互是如何工作的。是的，“TableRowExpandedComponent”是子组件@有一种关系。看看第一个HTML snipet的最后一行。刚刚试过，它就像一个符咒。我按照您的建议在子组件方法中传入了

post

，并添加了

postFromParent=post

。虽然这是可行的，但我仍然很好奇为什么我的原始代码不起作用，所以如果您或任何人有想法，我仍然会感兴趣。

export class TableComponent {
  @ViewChild('modal') modal;

  selectRow(post) {
    this.modal.open(post);
  }

}

<app-table-row-expanded #modal> [postFromParent]="selected"</app-table-row-expanded>

export class TableRowExpandedComponent implements OnInit {

  public open(post) {
     // whatever logic to display your stuff here
  }
}