मैं सूची आइटम के सक्रिय वर्ग को हटाना चाहता हूं जिसे मैंने जानबूझकर सक्रिय किया था, इसलिए जब पृष्ठ लोड होता है तो मैं चाहता हूं कि यह सूची आइटम राउटरलिंकएक्टिव = "सक्रिय" का उपयोग करके सक्रिय रहे। जब मैं कोणीय में सूची के अन्य आइटम का चयन करता हूं तो मैं इस सक्रिय वर्ग को अक्षम करना चाहता हूं

मैंने ngClass का उपयोग करने की कोशिश की, लेकिन उम्मीद के मुताबिक काम नहीं किया। Jquery का उपयोग किए बिना यह कैसे किया जा सकता है?

<ul class="nav"> 
       <li routerLinkActive="active" *ngFor="let menuItem of menuItems" [ngClass]="{'active': selectedItem == menuItem}" (click)="listClick($event, menuItem)">
         <a class="nav-link" [routerLink]="[menuItem.path]">
         <p>{{ menuItem.title }}</p>
        </a>
       </li>
     </ul>

declare interface RouteInfo {
  path: String,
  title: String,
  class: String
}
export const ROUTES: RouteInfo[] = [
  { path: '', title: 'Dashboard', class: '' },
  { path: '/vessel', title: 'Vessel Details', class: '' },
  { path: '/arrival', title: 'Arrival Details', class: ''},
  { path: '/stock', title: 'StockYard', class: ''},
  { path: '/cargo', title: 'Cargo Details', class: '' },
  { path: '/other', title: 'Others', class: ''}

];

menuItems: any[];
  selectedItem= false;

listClick(event, newValue) {
    console.log(newValue);
    this.selectedItem = !this.selectedItem;

  }

जब अन्य सूची आइटम क्लिक किए जाते हैं तो जानबूझकर सक्रिय सक्रिय वर्ग को अक्षम कर दिया जाना चाहिए।

1
divya dave 10 सितंबर 2019, 17:11

1 उत्तर

सबसे बढ़िया उत्तर

मैं देखता हूं कि आप अब क्या करने की कोशिश कर रहे हैं। आपको ngClass या क्लिक इवेंट का उपयोग करने की आवश्यकता नहीं है। कोणीय यह देखने के लिए जांच करेगा कि सक्रिय मार्ग राउटरलिंक पथ से मेल खाता है या नहीं। यदि ऐसा होता है, तो ActiveRouterLink में निर्दिष्ट वर्ग जोड़ा जाता है।

आप जो देख रहे हैं उसे जाने बिना अपनी समस्या को हल करना कठिन है, लेकिन li तत्व में [routerLinkActiveOptions]="{exact: true} जोड़ने का प्रयास करें।

0
William Stevens 11 सितंबर 2019, 03:19