角度组件通信

Question

我在让两个组件在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>

任何帮助都将不胜感激。

另外，我正在使用Angular CLI和Eclipse，并且已经出现了一些奇怪的错误(运行代码无法编译，除非我关闭并重新打开文件ie。但这不是这里的问题所在)

Answer 1

有很多方法可以让它按照你想要的方式运行。我最喜欢的模式是在模式组件中公开一个公开的开放方法。这将使您可以根据您喜欢的任何条件直接使用数据调用它。例如，设置可以是

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

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

}

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

modal提供了对组件的引用，该组件由@ViewChild装饰器访问。现在，您只需要在模态组件中创建您的open方法

export class TableRowExpandedComponent implements OnInit {

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

您还可以正常访问发布到组件的任何@Input