मैं मेनू बार टेक्स्ट का रंग बदलना चाहता हूं, जबकि यह चुना गया है।

शायद यहाँ क्या गलत हो रहा है?

मैंने छद्म वर्ग ': सक्रिय' का उपयोग करने की कोशिश की लेकिन लागू नहीं हो रहा है। जहां ': होवर' काम कर रहा है।

मैंने 'राउटरलिंकएक्टिव' का उपयोग करने की भी कोशिश की, जिसे 'सक्रिय-लिंक' वर्ग जोड़ना है, लेकिन वह भी काम नहीं कर रहा है।

मैंने नीचे HTML, SCCS और TS कोड दिया है:

मेनूबार.html

<div class="links">
  <div class="links-hidden" *ngIf="!myVar">
    <a class="lnk-btn" (click)="goToDebugger()" routerLinkActive='active-link'>Debugger</a>
    <a class="lnk-btn" (click)="goToProvision()"> OTA </a>
    <a class="lnk-btn" (click)="goToProvision()"> Configuration Manager </a>
    <a class="lnk-btn" (click)="goToProvision()"> Device Monitor </a>
    <a class="lnk-btn" (click)="goToDeviceInfo()" routerLinkActive='active-link'>Device Info</a>
  </div>
</div>

<mat-icon class="search-icon" (click)="toggle()" *ngIf="!myVar">search</mat-icon>
<div class="searchbar" *ngIf="myVar">
  <mat-icon class="search-icon-searchbar" (click)="goToSearchDeatails()">search</mat-icon>
  <select class="dropdown">
    <option value="MAC">MAC</option>
    <option value="UUID">UUID</option>
    <option value="Email">Email</option>
    <option value="Serial">Serial</option>
  </select>
  <div class="search">
    <input class="search-bar" type="search" placeholder="Search..." aria-label="Search" />
  </div>
  <mat-icon class="close-icon" (click)="toggle()">close</mat-icon>
</div>
<mat-icon class="person-icon" (click)="logout()">person</mat-icon>

मेनूबार.एससीएसएस

    .links {
        padding-left: 480px;
        padding-bottom: 2px;
        display: inline-block;
    }
    .links-hidden {
        .lnk-btn {
            font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
            font-size: 16px;
             margin-right: 19px;
             color: white;
            cursor: pointer;
            &:hover {
                color: #7f93aa;
            }
            &:active {
                 color: #7f93aa;
            }
        }
    }
    .mat-icon {
        color: white;
        padding-top: 5px;
        display: inline-block;
    }
    .dropdown {
        width: 75px;
        margin-left: 22px;
        background-color: #062343;
        color: rgb(19, 241, 241);
        border: transparent;
    }
    .search {
        display: inline-block;
        margin-left: 15px;
        .search-bar {
        background-color: #062343;
        color: rgb(19, 241, 241);
        height: 40px;
        width: 880px;
        border: transparent;
        padding: 5px;
        }
    }
    .search-icon {
        vertical-align: middle;
        cursor: pointer;
        margin-right: 15px;
    }
    .search-icon-searchbar {
        vertical-align: middle;
        cursor: pointer;
        margin-left: 15px;
    }
    .searchbar {
        display: inline-block;
        margin-left: -77%;
        background-color: #062343;
    }
    .close-icon {
        vertical-align: middle;
        cursor: pointer;
        margin-right: 15px;
        margin-left: 25px;
    }
    .person-icon {
        vertical-align: middle;
        cursor: pointer;
    }
    .active-link {
        color: #7f93aa;
    }

मेनूबार.ts

import { Component, OnInit, Inject, Directive } from '@angular/core';
import { Router, RouterLinkActive, RouterModule } from '@angular/router';

@Component({
  selector: 'app-menubar',
  templateUrl: './menubar.component.html',
  styleUrls: ['./menubar.component.scss']
})

@Directive({
  selector: '[routerLinkActive]'
})

export class MenubarComponent implements OnInit {
  public myVar: boolean = false;

  constructor(private router: Router) {}

  ngOnInit() {}

  toggle() {
    this.myVar = !this.myVar;
    console.log(this.myVar);
  }

  logout() {
    this.router.navigate(['/login']);
    localStorage.setItem('smtLogin', '0');
  }

  goToDebugger() {
    this.router.navigate(['/debugger']);
  }

  goToDeviceInfo() {
    this.router.navigate(['/device-info']);
  }
}
0
Rachana DS 27 मार्च 2020, 10:32

3 जवाब

आप सीधे टेम्प्लेट में लिंक लागू कर सकते हैं और CSS स्टाइल को div कंटेनर में संलग्न कर सकते हैं। निम्नलिखित का प्रयास करें

<div class="links">
  <div class="links-hidden" *ngIf="!myVar">
    <div [routerLinkActive]="['active-link']">
      <a class="lnk-btn" [routerLink]="['debugger']">Debugger</a>
    </div>
    .
    .
    .
  </div>
</div>
0
Michael D 27 मार्च 2020, 10:44
मैंने ऐसा करने की कोशिश की लेकिन इसने मुझे एक त्रुटि दी। 'राउटरलिंकएक्टिव' से आबद्ध नहीं हो सकता क्योंकि यह 'div' की ज्ञात संपत्ति नहीं है। ("

यह एक संपत्ति बाध्यकारी है इसलिए [routerLinkActive]="'active'" जोड़ा गया है या आप सीधे [routerLink]="['device-info']" पास कर सकते हैं।

 <div class="links-hidden" *ngIf="!myVar">
   <div  [routerLink]="['device-info']" [routerLinkActive]="'active'">
      <a class="lnk-btn">Device Info</a>
   </div>
 </div>
0
Bansi29 27 मार्च 2020, 12:00
मैंने ऐसा करने की कोशिश की, लेकिन इसने मुझे एक त्रुटि दी। 'राउटरलिंक' से नहीं जुड़ सकता क्योंकि यह 'ए' की ज्ञात संपत्ति नहीं है। (" Debugger
--> ][ राउटरलिंक]="['डिवाइस-जानकारी']" [राउटरलिंकएक्टिव]="'सक्रिय'">डिवाइस की जानकारी

राउटरलिंकएक्टिव एक कोणीय चयनकर्ता है, बस सोच रहा है कि आपने इसे अपने घटक में चयनकर्ता के रूप में क्यों जोड़ा है।

आदर्श रूप से ऐसा कुछ, आपके लिए काम करना चाहिए।

 <a routerLink="home" routerLinkActive='active-link'>Home</a>

enter image description here

0
Mridusmita Deka 4 मई 2020, 10:34