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>

任何帮助都将不胜感激。

PS，我正在使用带有Eclipse的Angular CLI，并且已经出现了一些奇怪的错误（运行代码没有编译，除非我关闭并重新打开文件，但是这并不觉得这里是问题）

Answer 1

有很多方法可以让你按照自己的方式行事。我最喜欢的模态是在模态组件中公开一个公共的open方法。这将允许您根据您喜欢的任何条件直接调用数据。例如设置可能是

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
  }
}

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

角度组件通信

1 个答案: