javascript - 在一个html模板中使用(单击)事件来控制单独模板中的[隐藏]元素 Angular 2

Question

我有 2 个 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>

基本上，按钮和信息卡位于不同的模板/文件中，但显示在 View 中的同一页面上。我需要帮助来使按钮展开/折叠信息卡，即使它们位于单独的模板中。我认为这个主题足够普遍，如果得到回答，也足以帮助其他人:)

Answer 1

只是简短的示例:

<panel #panel>
<button (click)="panel.collapsed=!panel.collapsed">

创建组件引用#panel并使用它来更改状态。