각도 2에서 CSS 스타일을 변경하는 방법

Question

드롭 다운이있는 세로 메뉴를 만들려고합니다. CSS에서 'hover'를 사용하여 현재 작업하고 있지만 사용자가 드롭 다운을 클릭 할 수 있도록하고 하위 메뉴가 사용자가 마우스를 가리 키지 않아도 하위 메뉴가 열려 있도록하려고합니다.

내가 겪고있는 문제는 Statistics 드롭 다운을 클릭하면 실제로 showStatMenu() 메서드에 적용되지만 하위 메뉴가 실제로 열리거나 표시되지 않는다는 것입니다. 어느 날 내가 실제로 CSS를 변경하려면 각도 2에 대한 showStatMenu() 내의 코드가 잘못되었다고 가정합니다.

* 그리고 그래 내가 showStatMenu()를 개방 전환 및 폐쇄되지 않는다는 것을 깨닫게은, 난 그냥 처음 열려는 다음 열려 전환에 대해 걱정

HTML

<div class="dashboard"> 
    <ul class="mainmenu"> 
    <li><a (click)="showStatMenu()">Statistics <span class="right"><i class="fa fa-angle-down"></i></span></a> 
     <ul class="submenu" id='stat'> 
     <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> 

TS 이후 폐쇄

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'; 
    } 
} 

CSS (유용 할 수 있습니다,하지만 난 그게 문제라고 생각하지 않습니다)

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

도움을 주셔서 감사합니다. 오랫동안 나를 괴롭 히고 있습니다.

Answer 1

Angular2의 코드에서 직접 DOM 액세스를 피하십시오. 오히려 ngStyle처럼 바인딩 및 지침을 사용 :

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>