角2内からCSSスタイリングを変更する方法

Question

ドロップダウンを使用して垂直メニューを作成しようとしています。私は現在、CSSで 'ホバー'を使って作業していますが、ユーザーがドロップダウンをクリックできるようにして、ユーザーがホバーオーバーしていなくてもサブメニューを開いたままにします。

私が実行している問題は、Statisticsドロップダウンをクリックすると実際にshowStatMenu（）メソッドに入りますが、サブメニューは実際には表示されず、表示されなくなります。これは、実際にCSSを変更するには、Angular 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>