在一个html模板中使用(点击）事件来控制单独模板Angular 2中的[hidden]元素

Using (click) event in one html template to control [hidden] element in a separate template Angular 2

本文关键字：Angular 单独模 控制 元素 hidden 中的 html 一个 点击 事件      更新时间：2023-09-26

我有两个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生成事件。

组件交互食谱中有这三个方面的例子。

相关文章：