我有一个 3 级导航栏,第二级有一个颜色代码,对应于他各自的第三级
我想要实现的是当一个关卡被点击时,关卡的背景颜色会变成它的左边框颜色(例如“Réseau”bg 应该是全蓝色)但我无法让它正常工作因为关卡是用 NgFor* 渲染的,而颜色是来自 switch() 函数的变量。
如果有人能引导我了解我做错了什么,我将不胜感激。一直在尝试 NgStyle 和 NgClass 但还没有成功。
navbar.html
<div class="w-100 text-nowrap">
<nav class="nav nav-tabs w-25 flex-column flex-sm-row reduceHeight40 mainNav">
<input type="submit"
[value]="label_name[first]"
checked
[style.borderColor]="getColors(first)"
class="flex-sm-fill border-top-0 border-right-0 text-nowrap border-left-0 text-sm-center nav-link alu hovAlu"
*ngFor="let first of firstLevel"
(click)="dynamicFilter1(first); ">
</nav>
<div class="container alu dpf navbar-light">
<div class="nav nav-tabs flex-column text-nowrap thirdColor flex-sm-row navbar-light" >
<input [value]="label_name[second]" type="submit"
*ngFor="let second of dynamicLevels1; let index2 = index"
(click)="dynamicFilter2(second);selectedItem = index2;selectedItem2 = null"
[style.borderLeftColor]="getColors(second)"
[ngClass]="{'active': selectedItem === index2}"
class="flex-sm-fill ml-2 reduceHeight25 wdt10 text-sm-center nav-link"
>
</div>
</div>
<div class="container alu dpf navbar-light" *ngIf="ShowImage === false">
<div class="w-100">
<nav *ngIf="ShowTemplate"
class="nav nav-tabs d-flex flex-column ml-1 level3 flex-sm-row navbar-light " >
<input type="button" [value]="label_name[(third)]"
[style.borderColor]="getColors(third)"
class="flex-sm-fill text-nowrap reduceHeight25 smallText border-top-0 border-right-0 borderless border-left-0 wdt10 text-sm-center nav-link"
(click)="dynamicFilter3(third);selectedItem2 = index3"
[ngClass]="{'active': selectedItem2 === index3}"
*ngFor="let third of dynamicLevels2;let index3 = index">
</nav>
</div>
</div>
</div>
开关功能
colors: any;
getColors(color) {
this.colors = color;
switch (color) {
case(1):
return 'rgb(0, 118, 172)';
case(2):
case(3):
case(4):
return 'rgb(0, 118, 172)';
case(5):
case(6):
case(7):
return 'rgb(255,185,29)';
case(8):
return 'rgb(3,160,128)';
case(9):
case(10):
case(11):
case(12):
return 'rgb(169,169,169)';
}
}
如果您需要更多代码,请告诉我,我会添加。
提前感谢您的帮助!
答案 0 :(得分:1)
老实说,我会将样式属性单独留给样式表。 这有几个优点,仅举几例:
这里有一个例子:
scss:
$colors-map: (
'1': rgb(0, 118, 172),
'2': rgb(0, 118, 172),
'3': rgb(0, 118, 172),
'4': rgb(0, 118, 172),
'5': rgb(255, 185, 29),
'6': rgb(255, 185, 29),
'7': rgb(255, 185, 29),
'8': rgb(3, 160, 128),
'9': rgb(169, 169, 169),
'10': rgb(169, 169, 169),
'11': rgb(169, 169, 169),
'12': rgb(169, 169, 169)
);
@each $c in map-keys($colors-map) {
.color-#{$c} {
border-left: 5px solid map-get($colors-map, $c);
&.selected {
background-color: map-get($colors-map, $c);
}
}
}
html:
<ng-container *ngFor="let x of [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]">
<div class="color-{{x}}" [ngClass]="{selected: x === selectedX}" (click)="selectedX = x">
I am element {{ x }}!
</div>
</ng-container>
参见 stackblitz:
https://stackblitz.com/edit/angular-ivy-thypkb?file=src/app/app.component.ts