Question

我有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中放置相同的按钮，但它似乎没有工作

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

Answer 1

您可以使用事件在组件see the angular docs

之间进行通信

在标题组件中，您可以向类

添加EventEmitter属性

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

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

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

并在app.component.ts

中

onSidebarToggled(toggled: boolean) {
    ...
}

如果这对您的情况不起作用，您还可以使用注入两个组件的公共服务

如何将点击事件定位到Angular 2

1 个答案: