如何通过单击另一个组件来切换组件上的CSS类？

Question

我有两个组成部分： - 主要组件：app.component - 菜单组件：menu / menu.component

我想通过单击菜单组件元素来切换主要组件元素的CSS类？

我该如何绑定它？

我的结构

 -app
    app.component.html
    app.component.ts
    -menu
          menu.component.html
          menu.component.ts

Answer 1

使用标准Angular机制从子组件传递到父组件（@Output()属性），以及在组件元素上将属性绑定到类等的@HostBinding。

主要

模板：

<menu-component (clicked)="click()"></menu-component>
<div>I am styled</div>

TS：

@HostBinding('class.foo') public foo = false; 
click() { this.foo = true; }

CSS：

:host(.foo) div { color: red }

菜单

模板：

<div (click)="click()">Click me</div>

TS：

@Output() clicked;
click() { this.clicked.emit(); }