在一个html模板中使用（单击）事件来控制单独模板Angular 2中的[隐藏]元素答案

【问题标题】：Using (click) event in one html template to control [hidden] element in a separate template Angular 2在一个html模板中使用（单击）事件来控制单独模板Angular 2中的[隐藏]元素
【发布时间】：2016-04-15 13:26:09
【问题描述】：

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

基本上，按钮和信息卡位于不同的模板/文件中，但显示在视图的同一页面上。我需要有关使按钮展开/折叠信息卡的帮助，即使它们位于单独的模板中。我认为这个话题很笼统，如果得到回答也可以帮助其他人:)

【问题讨论】：

标签： javascript html angularjs ionic-framework angular

【解决方案1】：

只是简短的示例：

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

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

【讨论】：

【解决方案2】：

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

如果没有关系，请使用带有主题的服务。一个组件将 subscribe() 发送给 Subject 以侦听事件，而另一个组件将通过 Subject 生成事件。

Component Interaction Cookbook 包含所有三个示例。

【讨论】：