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

问题描述

我正在尝试创建带有下拉菜单的垂直菜单".目前，我可以通过在CSS中使用悬停"功能来使其工作，但我想使它能够使用户单击下拉菜单，并且即使用户没有将鼠标悬停在该子菜单上，该子菜单仍保持打开状态.

我遇到的问题是，当我单击统计信息"下拉列表时，它实际上将使它进入方法showStatMenu()，但是该子菜单实际上不会打开/变得可见.这让我假设Angular 2实际更改CSS时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;
}

感谢您的帮助，这使我烦恼的时间比应该的更长！

解决方案

尝试避免从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>

I am attempting to make a Vertical Menu with dropdowns. I have it working currently by using 'hover' in CSS but I want to make it so that a user can click a dropdown and the submenu will stay open even when a user is not hovering over it.

The problem I am running into is that, when I click the Statistics dropdown, it will actually make it into the method showStatMenu(), but the submenu will not actually open/become visible. Which makes me assume that the code within the showStatMenu() is wrong for Angular 2 to actually change the CSS.

*And yes I realize that showStatMenu() is not toggling open and closed, I just want it to open first and then worry about toggling it open and closed later

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 (May be useful, but I don't think it is the problem)

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

Thanks for the help, this has been bugging me for way longer than it should!

解决方案

Try to avoid direct DOM access from code in Angular2. Rather use bindings and directives like 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>

这篇关于如何从Angular 2组件中更改CSS样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！