angular2 ngClass

最新推荐文章于 2020-12-19 16:47:41 发布
最新推荐文章于 2020-12-19 16:47:41 发布
阅读量364 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhangbo19920918/article/details/81278127
版权
1.页面
<div class="folder-box" [hidden]="isHidden" *ngIf="isAuthenticated()" id="mainfolder"> <!--如果不需要折叠菜单 直接给该处添加[hidden]="true"-->
<div class="folder-menu" [hidden]="hiddenMemu">
<div *ngFor="let secM of secMenuList,let firstIndex= index;">
     <div class="first-class" [ngClass]="{'this': firstIndex==firstClass}" (click)="showOrOpen(secM,firstIndex)">
     <i>
     <img src="../../../content/images/icon01.png"/>
     </i>
     <span>{{secM.label}}</span>
     <i class="folder unfolder">
     <img src="../../../content/images/icon03.png" *ngIf="secM.children.length"/>
     </i>
     </div>
     <div class="submenu" *ngIf="secM.children.length" [hidden]="secM.showFlag" >
<div *ngFor="let thrM of secM.children,let secondIndex = index;">
<div class="second-class" [ngClass]="{'this': secondIndex == secondClass}" (click)="openWin(thrM,secondIndex)">
<span>{{thrM.label}}</span>
</div>
</div>
     </div>
</div>
</div>
<!--有三级级菜单-->
<!--只有二级菜单-->
<div class="show" [ngClass]="divStyle" (click)="hiddenMemuDiv()">
<img src="../../../content/images/icon06.png"/>
</div>
</div>
 
2.ts组件
import { Component, OnInit ,OnDestroy} from '@angular/core';
import { Router, ActivatedRouteSnapshot, NavigationEnd, RoutesRecognized } from '@angular/router';
import { EventManager, AlertService } from 'ng-jhipster';
import { Subscription } from 'rxjs/Rx';

import { Title } from '@angular/platform-browser';
import { Principal, StateStorageService } from '../../shared';

@Component({
selector: 'jhi-main',
templateUrl: './main.component.html',
styleUrls: [
'main.css'
]
})
export class JhiMainComponent implements OnInit, OnDestroy {
    
    isHidden: boolean;
isSidebarCollapsed: boolean;
hiddenMemu: boolean = false;
divStyle:any;
eventSubscriber: Subscription;
    secMenuList: any;
firstClass:number = 0;
secondClass:number = -1;
constructor(
private titleService: Title,
private router: Router,
private principal: Principal,
private $storageService: StateStorageService,
private eventManager: EventManager // 事件管理
) {
    this.isHidden = true;
    this.secMenuList = [];
}

private getPageTitle(routeSnapshot: ActivatedRouteSnapshot) {
let title: string = (routeSnapshot.data && routeSnapshot.data['pageTitle']) ? routeSnapshot.data['pageTitle'] : 'schintacloudApp';
if (routeSnapshot.firstChild) {
title = this.getPageTitle(routeSnapshot.firstChild) || title;
}
return title;
}
hiddenMemuDiv(){
if( this.hiddenMemu ==false){
this.hiddenMemu = true;
this.divStyle = "hide";
} else {
this.hiddenMemu = false;
this.divStyle = "show";
}
}
ngOnInit() {
    
    this.eventSubscriber = this.eventManager.subscribe('menuChange', (response) => this.changeMenu(response));
    
this.router.events.subscribe((event) => {
if (event instanceof NavigationEnd) {
this.titleService.setTitle(this.getPageTitle(this.router.routerState.snapshot.root));
}
if (event instanceof RoutesRecognized) {
let params = {};
let destinationData = {};
let destinationName = '';
let destinationEvent = event.state.root.firstChild.children[0];
if (destinationEvent !== undefined) {
params = destinationEvent.params;
destinationData = destinationEvent.data;
destinationName = destinationEvent.url[0] ? destinationEvent.url[0].path : '';
}
let from = {name: this.router.url.slice(1)};
let destination = {name: destinationName, data: destinationData};
this.$storageService.storeDestinationState(destination, params, from);
}
});
}

changeDetroy(event){
if(event && event !=null && event =='navbarNgOnDestroy') {
this.isHidden = true;
}
}

ngOnDestroy() {
this.eventManager.destroy(this.eventSubscriber);
}
isAuthenticated() {
return this.principal.isAuthenticated();
}

toggleSidebar() {
this.isSidebarCollapsed = !this.isSidebarCollapsed;
}
 
changeMenu(data) {
    if (data.content) {
        if (data.content.sign == '1') {
             this.secMenuList = data.content.res;
             this.showOrOpen(this.secMenuList[0]);
             this.isHidden = false;
        } else if (data.content.sign == '2') {
            this.showOrOpen(data.content.res);
            this.isHidden = true;
        } else if (data.content.sign == '3') {
            this.secMenuList = data.content.res;
            this.isHidden = false;
        } else if (data.content.sign == '4') {
            this.isHidden = true;
        }
        
    } else {
        this.router.navigate(['/']);
        this.isHidden = true;
    }
}
 
showOrOpen(secM,firstIndex?:any) {
if(firstIndex || firstIndex == 0) {
this.firstClass = firstIndex;
} else {
this.firstClass = 0;
}

    if (secM && secM.children.length > 0) {
        secM.showFlag = !secM.showFlag;
    } else {
        this.openWin(secM);
    }
}

openWin(obj,secondIndex?:any) {
if(secondIndex || secondIndex == 0) {
this.firstClass = -1;
this.secondClass = secondIndex;
} else {
this.secondClass = -1;
}

    if (obj.data) {
        this.router.navigate(['/'+obj.data.menuIdPath]);
    }
}
}
 
3.css文件
/* ==========================================================================
Main
========================================================================== */
.layout-sidebar{
width: 260px;
height: 100%;
position: fixed;
z-index: 102;
overflow-y: auto;
transition: margin-left .3s;
background: #4e5159;
background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#4e5159),color-stop(100%,#1f2023));
background: -webkit-linear-gradient(top,#4e5159,#1f2023);
background: linear-gradient(180deg,#4e5159 0,#1f2023);
}

.main-content{
/*margin-left: 260px;*/
/*padding-top: 50px;*/
transition: margin-left .3s;
/*padding-bottom: 40px;*/
padding: 0;
padding-right: 0rem;
}
.folder-box{
display: flex;
background: #4c545f;
flex-direction: column;
position: relative;
box-shadow: 0 0 10px #6d6d6d;
-webkit-box-shadow: 0 0 10px #6d6d6d;
-moz-box-shadow: 0 0 10px #6d6d6d;
-ms-box-shadow: 0 0 10px #6d6d6d;
-o-box-shadow: 0 0 10px #6d6d6d;
margin-right: 1rem;
}
.folder-menu{
display: flex;
flex-direction: column;
overflow-y: scroll;
width: 13rem;
}
.folder-menu::-webkit-scrollbar{
width: 6px;
height: 6px;
background-color: transparent;
}
/*定义滚动条的轨道，内阴影及圆角*/
.folder-menu::-webkit-scrollbar-track{
border-radius: 5px;
background-color: transparent;
}
/*定义滑块，内阴影及圆角*/
.folder-menu::-webkit-scrollbar-thumb{
/*width: 10px;*/
height: 10px;
border-radius: 5px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: #4c545f;
}
.folder-menu .first-class{
display: flex;
width: 100%;
height: 3rem;
line-height: 3rem;
border-bottom: 1px solid #5F5D5D;
cursor: pointer;
}
.folder-menu .first-class:hover{
background: #6c737d;
}
.folder-menu .first-class.this{
background-image: url(../../../content/images/icon05.png);
background-position: right center;
background-repeat: no-repeat;
background-color: #6c737d;
}
.folder-menu .first-class i{
display: -webkit-box;
width: 3rem;
height: 3rem;
-webkit-box-pack: center;
justify-content: center;
}
.folder-menu .first-class i img{
height: 18px;
width: auto;
}
.folder-menu .first-class span{
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -o-box;
display: box;
-webkit-box-flex: 1;
-moz-box-flex: 1;
-ms-flex: 1;
-o-box-flex: 1;
box-flex: 1;
color: #fff;
/*font-weight: bold;*/
-webkit-box-align: center;
width: 7rem;
/*padding-left: 1rem;*/
}
.folder-menu .first-class i{
display: -webkit-box;
width: 3rem;
height: 3rem;
-webkit-box-pack: center;
justify-content: center;
}
.folder-menu .first-class i.folder{
width: 2rem;
}
.folder-menu .first-class i.folder img{
height: 10px;
width: auto;
}
.folder-menu .first-class i.unfolder img{
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
}
.folder-menu .submenu{
display: -webkit-box;
display: box;
-webkit-box-flex: 1;
-moz-box-flex: 1;
-ms-box-flex: 1;
-moz-box-flex: 1;
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
-ms-box-orient: vertical;
}
.folder-menu .submenu .second-class{
display: flex;
width: 100%;
height: 3rem;
line-height: 3rem;
margin-bottom: 1px;
/**/
cursor: pointer;
}
.folder-menu .submenu .second-class:hover{
background-color: #05C9D9;
}
.folder-menu .submenu .second-class.this{
background-image: url(../../../content/images/icon05.png);
background-position: right center;
background-repeat: no-repeat;
background-color: #6c737d;
}
.folder-menu .submenu .second-class span{
display: -webkit-box;
display: box;
-webkit-box-flex: 1;
-moz-box-flex: 1;
-ms-box-flex: 1;
-moz-box-flex: 1;
color: #fff;
-webkit-box-align: center;
width: 100%;
padding-left: 4.5rem;
background: url(../../../content/images/icon04.png) 3rem center no-repeat;
}
.show{
display: -webkit-box;
position: absolute;
top: 50%;
left: 13rem;
width: 20px;
height: 40px;
background: #3F4752;
-webkit-box-align: center;
-ms-box-align: center;
-moz-box-align: center;
-o-box-align: center;
-webkit-box-pack: center;
-ms-box-pack: center;
-moz-box-pack: center;
-o-box-pack: center;
margin-top: -10px;
z-index: 99;
cursor: pointer;
-webkit-transform:rotate(180deg);
transform:rotate(180deg);
-moz-transform:rotate(180deg);
-o-transform:rotate(180deg);
-ms-transform:rotate(180deg);
}
.hide{
display: -webkit-box;
position: fixed;
top: 50%;
left: 0rem;
width: 20px;
height: 40px;
background: #3F4752;
-webkit-box-align: center;
-ms-box-align: center;
-moz-box-align: center;
-o-box-align: center;
-webkit-box-pack: center;
-ms-box-pack: center;
-moz-box-pack: center;
-o-box-pack: center;
margin-top: -10px;
z-index: 99;
cursor: pointer;
-webkit-transform:rotate(0deg);
transform:rotate(0deg);
-moz-transform:rotate(0deg);
-o-transform:rotate(0deg);
-ms-transform:rotate(0deg);
}
/*
.navbar{
position: fixed;
// left: 260px;
right: 0;
top: 0;
z-index: 102;
padding: 0;
height: 50px;
background: #0388e5;
transition: left .3s;
color: #fff;
padding: 9px 20px;
line-height: 1.15;
}*/
.navbar{
padding: 0;
display: initial !important;
}
:host >>> .footer {
border-top: 1px solid rgba(0,0,0,.125);
/*margin-left: 260px;*/
transition: margin-left .3s;
}

.sidebar-collapsed .layout-sidebar{
margin-left: -260px;
}
.sidebar-collapsed .main-content{
margin-left: 0;
}
.sidebar-collapsed .navbar{
left: 0;
}
:host >>> .sidebar-collapsed .footer{
margin-left: 0;
}
对雪书空武
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
angular2 基础架构
04-16
**Angular2 基础架构详解** Angular2 是一个强大的前端框架，用于构建单页应用程序（SPA）。它基于TypeScript开发，提供了丰富的功能和组件化结构，为开发者提供了高效的开发体验。本篇将深入探讨Angular2的基础...
Angular2数据绑定详解
08-30
Angular2 数据绑定是框架核心特性之一，用于在组件类与模板之间同步数据。它提供了多种方式来实现数据的流动，确保界面与应用状态保持一致。本文将深入探讨Angular2的数据绑定，包括单向绑定、事件绑定、双向绑定...
angular2 [ngStyle] [ngClass]的用法
pht1991的博客
05-18 1万+
1、ngStyle 基本用法 div [ngStyle]="{'background-color':'green'}">div> 判断添加 2、ngClass第一个参数为类名称，第二个参数为boolean值，如果为true就添加第一个参数的类 基本用法 [ngClass]="{'text-success':true}" 判断 [ngClass]="{'text-success':u
具有NgClass和NgStyle的Angular 2+类
culiu9261的博客
07-22 290
In this blog post, we'll be learning about NgClass and NgStyle in Angular v2.x. Throughout this blog post, Angular means Angular version greater than 2.x unless stated otherwise. 在此博客文章中，我们将学习Angula...
Angular2 ngclass与ngstyle的使用
weixin_30653097的博客
02-27 287
今日遇到ngClass与ngStyle的使用问题。 ngClass与ngStyle都是动态修改html样式的内置命令。 ngClass 官方文档的说明的格式： https://www.angular.cn/api/common/NgClass 1 <some-element [ngClass]="'first second'">...</some-element&g...
Angular 4.x NgClass 指令用法
xwnxwn的专栏
08-25 2660
引用地址 ：http://yunkus.com/angular-api-ngclass/ 用法 语 &lt;some-element [ngClass]="'first second'"&gt;...&lt;/some-element&gt;   &lt;some-element [ngClass]="['first', 'second']"&gt;...&lt;/some-elemen...
ng-class中的if else判断
程序猿成长之路
02-10 1万+
来自于stackoverflow的一个问题，自己刚好用到，搬过来做个标记。原问题链接 在使用ng-class时，有些时候会碰到根据是否满足条件来设置元素的样式，使用以下方法可以达到这样的目的。 （1）使用运算符 这样写无需在javascript中添加额外代码，但是需要注意的是要让代码具有良好的可读性。 （2）使用额外的方法 然后使用以下的代码：  $scope.setS
angular2简单的环境
01-16
Angular2 是一个流行的前端开发框架，由 Google 维护，用于构建高性能、可维护的单页应用程序（SPA）。它的设计目标是提供更好的开发工具、更好的性能以及更好的类型安全。Angular2 的环境设置对于初学者来说可能...
angular2 入门和示例书
12-28
**Angular2 入门** Angular2 是一个流行的前端框架，由Google维护，用于构建高性能、可维护的单页应用程序（SPA）。它采用TypeScript作为主要开发语言，提供强大的数据绑定和组件化特性，使得开发复杂Web应用变得...
angualrjs中的多个样式显示怎么解决？-ng-class多个条件
吃瓜群众的博客
10-11 2499
{{dictionaryItem.name}}' js中 $scope.setStyle = function (colortype) { if(colortype==0){ return 'label label-sm label-success'; }else
在 Angular 中添加 class (css 类)的几种方式
法研鲁迅的个人博客
12-19 4235
在 Angular 中添加 css 类的几种方式 主要是探索为 Angular 中的 HTML 元素动态的添加类的几种实现，包括 className 指令的使用，NgClass 的使用等。
Angular4中[ngClass]、[ngStyle]的基本使用
热门推荐
笑尽英雄
06-05 7万+
Angular
angular中的ng-class多条件判断的用法
前端小狮的博客
04-04 9178
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;title&gt;&lt;/title&gt; &lt;script src="http://cdn.static.runoob.com/libs/angu
AngularJS中关于ng-class指令的几种实现方式详解
寂寞的天空的博客
02-16 3672
前言 开发中经常会遇到这样的需求，一个元素需要在不同的状态下呈现不同的样子，而在这所谓的的样子当然就是改变其css的属性，而实现动态的改变属性值，我们就需要实现动态的更换其class属性值。 在这给大家介绍三种方法来实现，大家可以根据自己的需求来选择方式，下面来看看。 第一种：通过数据的双向绑定（不推荐） ? 1 2 3
AngularJS中ng-class使用方法
jumtre的专栏
03-04 5万+
有三种方法： 1、通过$scope绑定（不推荐） 2、通过对象数组绑定 3、通过key/value键值对绑定 实现方法： 1、通过$scope绑定（不推荐）： function ctrl($scope) { $scope.className = "selected"; } 2、通过对象数组绑定： function ctrl($scope)
angular2指令解读:ngFor,ngIf,ngSwitch,ngStyle,ngClass用法
涂涂
08-16 8047
0.先给组件赋值一个测试数据 import {Component} from '@angular/core'; @Component({ selector: 'ng-tag', styles: [require('./NgTag.scss')], template: require('NgTag.html') }) export class NgTagCompon
Angular：带* ngClass的条件类
p15097962069的博客
05-12 444
What is wrong with my Angular code? 我的Angular代码有什么问题？ I am getting: 我正进入（状态： Cannot read property
angular6 ngClass 和 ngStyle学习笔记
黄彪博客
10-01 2110
文章目录知识点ngClassngStyle案例 文章参考 Angular2 ngclass与ngstyle的使用 知识点 ngClass [ngClass]="‘css类1 css类2’" 字符串以空格分割形式。 [ngClass]="[‘css类1’,‘css类2’]" 数组形式。 [ngClass]="{‘css类1’:true, ‘css类2’:true}" key/value形式 ...
angular ngclass和ngstyle动态显示
最新发布
05-25
Angular中的`ngClass`和`ngStyle`指令都可以用来动态修改元素的样式。 `ngClass`指令可以根据表达式的值动态地添加或删除CSS类。例如： ``` [ngClass]="{'active': isActive, 'disabled': isDisabled}">内容 ``` ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

对雪书空武

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值