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

我有两个TypeScript文件，都在@Component中有HTML模板。假设一个模板显示的信息卡可以通过

[hidden]=“collazed”

折叠或展开。此函数存在于以下任一文件中：

    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 #panel>
<button (click)="panel.collapsed=!panel.collapsed">

---

创建组件参考

#面板

并使用它更改状态。

它取决于两个组件之间的关系（如果有）。如果存在父子关系，则可以使用输入属性或事件（取决于通信需要流向）

如果没有关系，请使用带有主题的服务。一个组件将

subscribe（）

订阅主题以侦听事件，另一个组件将通过主题生成事件

---

这三个组件都有示例。

这取决于两个组件之间的关系（如果有）。如果存在父子关系，则可以使用输入属性或事件（取决于通信需要流向）

如果没有关系，请使用带有主题的服务。一个组件将

subscribe（）

订阅主题以侦听事件，另一个组件将通过主题生成事件

这三个例子都有