如何将点击事件定位到 Angular 2 中的另一个组件答案

【问题标题】：How can i target a click event to another component in Angular 2如何将点击事件定位到 Angular 2 中的另一个组件
【发布时间】：2017-10-19 00:24:43
【问题描述】：

我有 2 个组件，即主 app.component 和一个 header.component 现在我想在标题中放置一个按钮，该按钮将一个类切换为在主 app.component 中处于活动状态我已经让按钮在 app.component 中工作但我想将按钮移动到标题组件但具有相同的功能

HTML

<div>
    <button type="button" id="sidebarCollapse" class="btn btn-primary" 
(click)="togglesideBar(); toggleSign();">
        <i class="glyphicon glyphicon-{{sign}}"></i>
    </button>
</div>
<!--Chat Side Bar-->
    <div id="chatsidebar" [ngClass]="{'active': isSideBarActive}">
        <app-chatsidebar></app-chatsidebar>
    </div>
</div>

APP.COMPONENT.TS

sign = 'chevron-right';

toggleSign() {
    if (this.sign === 'chevron-right') {
        this.sign = 'chevron-left';
    } else {
        this.sign = 'chevron-right';
    }
}

togglesideBar() {
    this.isSideBarActive = !this.isSideBarActive;
}

我尝试将相同的功能放在 header.component.ts 中，并将相同的按钮放在 header.component.html 中，但它似乎不起作用

任何帮助将不胜感激！谢谢

【问题讨论】：

德文在下面的回答是做到这一点的一种方法。取决于您的应用程序的复杂程度，尽管您可能想要查看 ngRx，它是解决此问题的更复杂的解决方案，但也解决了许多其他问题。 youtube.com/watch?v=cyaAhXHhxgk

标签： javascript html angular typescript

【解决方案1】：

您可以使用事件在组件之间进行通信see the angular docs

在您的标头组件中，您可以将 EventEmitter 属性添加到类中

@Output() sidebarToggled = new EventEmitter<boolean>();

然后绑定到您的主应用程序组件中的事件

<app-header (sidebarToggled)="onSidebarToggled($event)"></app-header>

在 app.component.ts 中

onSidebarToggled(toggled: boolean) {
    ...
}

如果这不适用于您的情况，您还可以使用注入两个组件的通用服务

【讨论】：

嘿，抱歉，现在快速提问我将函数放在哪里？？
onSidebarToggled 函数应该在您的应用组件类中，当它从标题组件更改时，它将传递 sidebarToggled 的值。在 onSidebarToggled 函数中，您可以切换您的 isSidebarActive 属性
对不起，这是否意味着现在在标题中的按钮上而不是 (click)="toggleSidebar();"我使用 (click)="sidebarToggled();" ??再次感谢
函数名是任意的。只要事件绑定中的函数名称与类中的函数名称匹配，您就可以选择调用它的名称。按钮单击事件应将 EventEmitter sidebarToggled 属性设置为 true 或 false。当它发生变化时，会触发应用程序组件侦听的事件并切换 isSidebarActive 属性
谢谢！刚刚想通了！