导航菜单：徽章的交替颜色（颜色应按顺序排列）

Question

这是MainService.ts中定义的函数，它可以更改badgesColorSet中设置的颜色，我已经在json配置中定义了3种颜色，我希望每次我都改变这3种颜色打开网站让它是红色然后我刷新页面它应该是绿色然后我再次刷新它应该是蓝色。那么这个函数是否正确，我应该使用 for 循环吗？我想我需要将它除以某个东西，以便它递增并从 0、1、2 作为索引？

getIteriateColor(){
        //gets  color out of color set from turnkey.config file for badges
    let  badgesColorSet = 0; badgesColorSet < Array.length; badgesColorSet++;
        console.log(badgesColorSet);
        return badgesColorSet;

颜色在交钥匙中定义-config.json

"badgesColorSet":["#ffff00","#f51307","#0cc902"],

此代码在主服务中用于定义 material 徽章的背景颜色

badge: {bg: this.getNextColor() , fg: 'white' , title: moduleBadge},

Answer 1

如果你想在刷新时“做点什么”，你可以使用 localstorage 我想你可以使用类似的东西

  color
  badgesColorSet=["#ffff00","#f51307","#0cc902"]
  ngOnInit(){
    let index=localStorage.getItem('indexColor')!=undefined?
                       +localStorage.getItem('indexColor'): -1
    index=(index+1)%3;
    localStorage.setItem('indexColor',''+index)
    this.color=this.badgesColorSet[index]
    
  }

首先看到，如果不存在localstorage.getItem('indexColor')（那是未定义的）你让index=0并存储“0”，下次你存储“1”，, 2","0","1","2"... -localStorage 只接受"strings" 这是因为你使用 ''+index 转换为 string 而 +localStorage.getItem ('indexColor') 转换为数字

使用ìndex=(index+1)%3使得index的值变为0,1,2,0,1,2,0,1,2...

注意：您也可以使用 sesionStorage（只需将代码 localstorage 替换为 sessionStorage）

Answer 2

我认为最好的方法是使用 [ngClass] 和条件，方法是指向您用这些颜色预定义的 css 类。

Answer 3

在组件中：

interface Link {
  label: string;
  route: string;
  icon: string;
}

links: Link[] = [ // your links ]

内部模板：

<nav>
  <a *ngFor="let link of links; let odd = odd" [href]="link.route" [class.odd]="odd">{{link.label}}</a>
</nav>

Answer 4

假设 getNextColor() 调用 getIteriateColor() 以获得下一个颜色。

在 getIteriateColor() 让我们遍历 "badgesColorSet":["#ffff00","#f51307","#0cc902"] 并在迭代达到 [2].

时从 [0] 重新开始

为了记住上次使用的颜色，我们应该将其存储在状态保留的客户端某个位置（例如 localStorage），这样我们就知道接下来要选择什么颜色。

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  badgesColorSet = ['#ffff00', '#f51307', '#0cc902'];
  badgesColorSelected: string;
  constructor() {
    this.getIteriateColor();
  }

  getIteriateColor() {
    // if there is no color in localStorage, set the first color
    if (!localStorage.getItem('badgesColorSelected')) {
      localStorage.setItem('badgesColorSelected', this.badgesColorSet[0]);
    } else {
      // if there is color, select the next color
      const storageColor = localStorage.getItem('badgesColorSelected');
      const colorIndex = this.badgesColorSet.indexOf(storageColor);
      if (colorIndex + 1 > this.badgesColorSet.length - 1) {
        this.badgesColorSelected = this.badgesColorSet[0];
        localStorage.setItem('badgesColorSelected', this.badgesColorSet[0]);
      } else {
        this.badgesColorSelected = this.badgesColorSet[colorIndex + 1];
        localStorage.setItem('badgesColorSelected',this.badgesColorSet[colorIndex + 1]
        );
      }
    }
  }
}

工作示例：https://stackblitz.com/edit/angular-ivy-mw7s49?file=src%2Fapp%2Fapp.component.ts

或者对于后端类似的东西，除了没有 localStorage。

  badgesColorSet: string[] = ['#ffff00', '#f51307', '#0cc902'];
  badgesColorSelected: string;

  getIteriateColor() {
    if (!this.badgesColorSelected) {
      this.badgesColorSelected = this.badgesColorSet[0];
    } else {
      let nextColorIndex = 0;
      for (let i = 0; i < this.badgesColorSet.length; i++) {
        if (this.badgesColorSet[i] === this.badgesColorSelected) {
          if (i <= this.badgesColorSet.length - 2) {
          nextColorIndex = i + 1;
          break;
          } 
        }
      }
      this.badgesColorSelected = this.badgesColorSet[nextColorIndex];
    }
    console.log('current color is: ', this.badgesColorSelected);
  }

badge: {bg: badgesColorSelected , fg: 'white' , title: moduleBadge},

Answer 5

这是为了我对 Joosep.P 做了一些更改的功能，感谢他。

getIteriateColor() {

    if (!this.badgesColorSelected) {
      this.badgesColorSelected = 0;
    } else {
      const colorIndex = this.badgesColorSelected;
      if (colorIndex + 1 > this.badgesColorSet.length - 1) {
        this.badgesColorSelected = this.badgesColorSet[0];
      } else {
        this.badgesColorSelected = this.badgesColorSet[colorIndex + 1];
      }
    }
    console.log('current color is: ', this.badgesColorSelected);
    
    return this.badgesColorSelected;
}
}

这是为了配置

 "badgesColorSet":["#f51307","#0cc902","#ffff00","#03fcf8","#03fcb1"],

导航菜单：徽章的交替颜色（颜色应按顺序排列）

Navigation Menu: Alternating colors for badges (colors should be in sequential order)

html

css

typescript

angular-material

angular