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

Question

我有两个组件：- main组件: app.component - menu组件:menu/menu组件

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

如何绑定？

我的结构

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

Answer 1

使用标准的角度机制从子组件到父组件(@Output()属性)进行通信，并使用@HostBinding将属性绑定到component元素上的类等。

主

模板：

<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(); }