Html 如何从Angular 2组件中更改CSS样式

我正在尝试制作一个带有下拉菜单的垂直菜单。目前，我在CSS中使用了“hover”，但我希望这样做，用户可以单击下拉菜单，即使用户没有在其上悬停，子菜单也会保持打开状态

我遇到的问题是，当我单击“统计信息”下拉列表时，它实际上会进入方法showStatMenu（），但子菜单实际上不会打开/变为可见。这让我假设showStatMenu（）中的代码对于Angular 2来说是错误的，因为它实际上改变了CSS

*是的，我意识到showStatMenu（）不是切换打开和关闭，我只是希望它先打开，然后再担心以后切换打开和关闭

HTML

CSS（可能有用，但我认为这不是问题）

---

谢谢你的帮助，这已经困扰了我很久了

尽量避免从Angular2中的代码直接访问DOM。而是使用绑定和指令，如

ngStyle

：

export class DashboardComponent implements OnInit {
  showStat:boolean = false;
}

统计数字

小组
播放器

为什么您认为它需要重新加载？我真的不明白这个问题。谢谢！这是工作，还有一件事我必须改变，使其工作。我需要注释掉CSS文件中初始化的代码的最大高度行。

import { Component, OnInit } from '@angular/core';
import { Dashboard } from './dashboard';
import { DashboardService } from './dashboard.service';
import { Router } from '@angular/router';

@Component({
  moduleId: module.id,
  selector: 'my-dashboard',
  templateUrl: 'dashboard.component.html',
  styleUrls: [ 'dashboard.component.css']
})
export class DashboardComponent implements OnInit {

  // Took out init method and other irrelevant code

  showStatMenu(){
    document.getElementById('stat').style.display = 'block';
    document.getElementById('stat').style.width = '200px';
  }
}

html, body {
  font-family: Arial, Helvetica, sans-serif;
}

.navigation {
  width: 300px;
}

.mainmenu, .submenu {
  list-style: none;
  padding: 0;
  margin: 0;
  width: 200px;
}

.mainmenu a {
  display: block;
  background-color: #d7dfea;
  text-decoration: none;
  padding: 10px;
  color: #000;
}

.mainmenu a:hover {
  background-color: #5a98fc;
  cursor: hand;
}

/*.mainmenu li:hover .submenu {
  display: block;
  max-height: 200px;
}*/ /*Hiding hover option*/

.submenu a {
  background-color: #9a9c9e;
  text-indent: 20px;
}

.submenu a:hover {
  background-color: #55d3ed;
  cursor: hand;
}

.submenu {
  overflow: hidden;
  max-height: 0;
  -webkit-transition: all 0.5s ease-out;
}

.right{
  float: right;
}

export class DashboardComponent implements OnInit {
  showStat:boolean = false;
}

<div class="dashboard">
  <ul class="mainmenu">
    <li><a (click)="showStat = !showStat">Statistics <span class="right"><i class="fa fa-angle-down"></i></span></a>
      <ul class="submenu" [ngStyle]="{'display': showStat ? 'block' : 'none, 'width': showStat ? '200px' : '0'}" >
        <li *ngFor="let dashboard of dashboards"><a class="indent" *ngIf="dashboard.id == 1" (click)="gotoDetail(dashboard)">Team</a></li>
        <li *ngFor="let dashboard of dashboards"><a class="indent" *ngIf="dashboard.id == 2" (click)="gotoDetail(dashboard)">Player</a></li>
      </ul>
    </li>
  </ul>
</div>