如何隐藏默认的导航，单击显示，如何向图像添加类和div角 [英] How to hide navigation default, show on click, how to add class to image & div angular

问题描述

我正在从事菜单导航.我有一个菜单图标，我想向其添加类以从主CSS文件控制它.

I am working on menu navigation. I have a menu icon I want to add class to it to control it from main css file.

页面加载时，我想隐藏导航.当我单击图标时，我想显示导航.当我从导航中移出鼠标时，我应该隐藏起来.我很困惑如何从哪个文件中调用css，我必须在app.component.ts或何处写入click事件.我必须在angular 4.0中做所有这些事情.

When page loads I want to hide navigation. When I click on icon I want to show navigation. when I mouse out from navigation I should hide. I am in confusion how to call css from which file, where I have to write click event in the app.component.ts or where. I have to do all these things in angular 4.0.

Thanks in advance.

    <img src="./assets/menuicon.png" [ngClass]="iconStyle">
      <ul class="nav navbar-nav navbar-right" ngHide="Expression">
          <!--<li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>-->
          <!--<li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>-->
          <li><a routerLink="one"><img ng-src="images/icon.png" src="{{image}}"></a></li>
          <li><a routerLink="two">two</a></li>
          <li><a routerLink="three">three</a></li>
          <li><a routerLink="four">four</a></li>
          <li><a routerLink="five">five</a></li>
          <li><a routerLink="six">six</a></li>
        </ul>

export class NavComponent implements OnInit {
name:string;
  show:string;
  constructor() {
   this.name = 'Angular 2 Ng Class';
    this.show = "true";
   }
  ngOnInit() {
  }
  logout(){
    this.show = "true";
  }
}

推荐答案

抱歉，我误解了这个问题，这是同一个产品的正常工作.

Sorry i Misunderstood the Question Here is a Working Plunker for the Same .

https://plnkr.co/edit/ZHd0Ora2fM5rC70GDUMu?p=preview

模板

<button (click)="logout()">XXXX</button>

  <ul class="nav navbar-nav navbar-right" [ngClass]="(show ==='true')?'hide-it':'show-it'">
      <!--<li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>-->
      <!--<li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>-->
      <li><a routerLink="one"><img ng-src="images/icon.png" src="{{image}}"></a></li>
      <li><a routerLink="two">two</a></li>
      <li><a routerLink="three">three</a></li>
      <li><a routerLink="four">four</a></li>
      <li><a routerLink="five">five</a></li>
      <li><a routerLink="six">six</a></li>
    </ul>

App.ts

export class App {
  name:string;
  show:string;
  constructor() {
    this.name = 'Angular 2 Ng Class';
    this.show = "true";
   }
  logout(){
    this.show = "false";
  }

}

CSS

.show-it {
  visibility: visible;
}

.hide-it {
  visibility: hidden;
}

这篇关于如何隐藏默认的导航，单击显示，如何向图像添加类和div角的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！