角度分量通信

我很难在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，并且已经有一些莫名其妙的错误已经出现（运行的代码不编译，除非我关闭并重新打开该文件即但这并不觉得是这里的问题）

来源

2017-08-28 Thodoris

是“TableRowExpandedComponent”你的对话框来创建你的开法？ –

从你在这里展示的代码看起来你的组件不在父子结构中。你可以看看组件交互如何工作[这里]（https://angular.io/guide/component-interaction） – BogdanC

是的，“TableRowExpandedComponent”是孩子。 @BogdanC有一种关系。看看第一个HTML Snipet的最后一行。 – Thodoris

有很多方法可以让你的行为符合你的要求。我最喜欢的模式是在模态组件中公开一个公开的方法。这可以让你根据你喜欢的任何条件直接调用它。作为示例设置可能是

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修饰器访问的组件的引用。现在你只需要在模态分量这样

export class TableRowExpandedComponent implements OnInit { 

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

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

来源

2017-08-28 16:33:53

只是试了一下，它的魅力。我按照你的建议在'post'中传入，并在子组件方法中传递'postFromParent = post'。虽然这工作，我仍然好奇，但为什么我原来的代码不起作用，所以如果你或任何人有一个想法，我仍然会感兴趣。 – Thodoris

角度分量通信

回答

相关问题