更新Angular2中不同组件的组件类

Question

当点击一个按钮时，我正试图更新"边栏"组件中可用的元素的类，该按钮在另一个名为"页眉"的组件中可用

我当前的设置：

app.ts

@Component({
selector: 'my-app',
template: `
<div>
<app-header></app-header>
<app-sidebar></app-sidebar>
</div>
`,
})

页眉.ts

@Component({
selector: 'app-header',
template: '<header><button (click)="isActiveSidebar = false">close aside</button></header>'
})
export class HeaderComponent implements OnInit {
isActiveSidebar = true;
}

边栏.ts

@Component({
selector: 'app-sidebar',
template: '<aside [class.aside-hidden]="!isActiveSidebar">sidbar</aside>'
})

Plunkrhttps://plnkr.co/edit/7iTE8Nb4R0TbUqhYv3QG?p=preview

我在这里所期望的是，当我点击头部组件中的按钮时，属性isActiveSidebar将设置为false，侧边栏组件中的aside元素将获得类"aside-hidden">

当我在一个组件中使用相同的设置时，同样的设置对我有效。目前我不知道如何在两个不同的组件之间完成这项工作。如果你能通过更新给定的plunkr演示来帮助我，我将不胜感激。

Answer 1

在HeaderComponent中创建一个@Output()，并将其与侧边栏连接：

@Component({
selector: 'app-header',
template: '<header><button (click)="deactivate()">close aside</button></header>'
})
export class HeaderComponent implements OnInit {
@Output() deactivateSidebar:EventEmitter<bool> = new EventEmitter<bool>();
isActiveSidebar = true;
deactivate() {
this.isActiveSidebar = false;
this.deactivateSidebar.emit(null);
}
}

@Component({
selector: 'my-app',
template: `
<div>
<app-header (deactivateSidebar)="sidebar.deactivate()"></app-header>
<app-sidebar #sidebar></app-sidebar>
</div>
`,
})

class AppSidebarComponent {
deactivate() {
this.isActiveSidebar = false;
}
}