如何隐藏默认的导航,单击显示,如何向图像添加类和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屋!