Question

我正在进行菜单导航。我有一个菜单图标我想添加类来从主css文件控制它。

页面加载时我想隐藏导航。当我点击图标时，我想显示导航。当我从导航鼠标中删除时，我应该隐藏。我很困惑如何从哪个文件调用css，我必须在app.component.ts或其中编写click事件。我必须在角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";
  }
}

Answer 1

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

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

Template

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

如何隐藏导航默认，点击显示，如何添加类到图像和＆amp; div角

1 个答案: