我有两个TypeScript文件,在@Component中都有HTML模板。假设一个模板显示可以使用[hidden]="collapsed"
折叠或展开的信息卡。此函数存在于以下任一文件中:
public collapsed : boolean = false;
toggleCollapsed(){
this.collapsed = !this.collapsed;
}
然后在一个单独的模板中,我有一个按钮来触发这个事件
<button clear (click)="toggleCollapsed()">
<ion-icon name="expand"></ion-icon>
Expand All
</button>
基本上,按钮和信息卡位于不同的模板/文件中,但显示在视图的同一页面上。我需要帮助使按钮展开/折叠信息卡,即使它们在单独的模板中。我认为这个主题足够笼统,如果回答的话,也可以帮助其他人:)
简短示例:
<panel #panel>
<button (click)="panel.collapsed=!panel.collapsed">
创建组件引用#panel
并使用它来更改状态。
这取决于两个组件之间的关系(如果有的话)。如果存在父子关系,则可以使用输入属性或事件(取决于通信需要流向哪个方向)。
如果没有关系,请使用具有Subject的服务。一个组件将subscribe()
发送到Subject以侦听事件,另一个组件通过Subject生成事件。
组件交互食谱中有这三个方面的例子。