第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問題,去搜搜看,總會(huì)有你想問的

下拉切換的樣式按鈕取決于 nav-link 的 RouterLinkActive

下拉切換的樣式按鈕取決于 nav-link 的 RouterLinkActive

Helenr 2023-10-24 17:17:38
我的導(dǎo)航欄包含 3 個(gè)項(xiàng)目:2 個(gè)元素<li>和<a>一個(gè)下拉 btn 組。當(dāng)遵循導(dǎo)航鏈接下拉選項(xiàng)之一時(shí),我想突出顯示下拉切換按鈕。這是我的代碼:<ul class="navbar-nav mx-auto h-100 navigation-items">  <li class="nav-item active">    <a      [routerLink]="['/app', 'tab1']"      routerLinkActive="active-link"      class="nav-link h-100"      >Tab1</a    >  </li>  <div class="btn-group dropdown" dropdown>    <button      class="btn btn-link nav-link h-100 dropdown-toggle"      id="button-basic"      dropdownToggle      type="button"-->      routerLinkActive="active-link"   <--- Doesn't work    >      Dropdown      <fa-icon [icon]="faChevronDown" size="xs"></fa-icon>    </button>    <ul      id="dropdown-basic"      *dropdownMenu      class="dropdown-menu main-nav"      role="menu"      aria-labelledby="button-basic"    >      <li role="menuitem">        <a          class="dropdown-item"          [routerLink]="['/app', 'tab2', 'link1']"          routerLinkActive="active-link"          >Link1        </a>      </li>      <li role="menuitem">        <a          class="dropdown-item"          data-letter=""          [routerLink]="['/app', 'tab2', 'link2']"          routerLinkActive="active-link"          >Link2        </a>     </li>      <li role="menuitem">        <a          class="dropdown-item"          [routerLink]="['/app', 'tab2', 'link3']"          routerLinkActive="active-link"          >Link3        </a>      </li>    </ul>  </div>我想根據(jù)下拉菜單項(xiàng)的 routerLinks 之一是否處于活動(dòng)狀態(tài)來更改按鈕的樣式。但是,由于按鈕本身不包含任何路由信息,并且菜單沒有自己的父頁(yè)面,因此我在互聯(lián)網(wǎng)上找到的解決方案對(duì)我來說還不起作用。正如您所看到的,簡(jiǎn)單地將 routerLinkActive="active-link" 添加到按鈕元素是行不通的。添加routerLinkActive="active-link" [routerLinkActiveOptions]="{exact: true}"到父 btn-group 可以工作,但不能幫助我動(dòng)態(tài)設(shè)置按鈕本身的樣式。(來源: https: //angular.io/api/router/RouterLinkActive)目前,RouterLinkActive 樣式在<li> nav-item元素和下拉項(xiàng)上運(yùn)行良好。我只想將其添加到<button>元素中。有人知道解決方法嗎?或者我應(yīng)該接受不可能使用 RouterLinkActive 直接設(shè)置按鈕樣式?如果您需要進(jìn)一步說明或我的 .scss 文件,請(qǐng)?jiān)u論..
查看完整描述

1 回答

?
慕少森

TA貢獻(xiàn)2019條經(jīng)驗(yàn) 獲得超9個(gè)贊

再會(huì)!


在您的情況下,問題是按鈕沒有路由器鏈接指令,它無法處理路由器事件并確定 - 它是當(dāng)前路由還是否。解決方案是獲取所需路由器鏈路的引用并在另一個(gè)地方(您想要的地方)使用它。


檢查這個(gè)非常基本的例子來了解這個(gè)想法:


<li class="menu-item" [class.menu-item--active]="dashboardLinkRef.isActive">

  <a routerLink="/dashboard" routerLinkActive #dashboardLinkRef="routerLinkActive">

    Dashboard

  </a>

</li>


<!-- Can be multiple refs to router links, that's not a problem ;) -->

<li class="menu-item" [class.menu-item--active]="loginLinkRef.isActive">

  <a routerLink="/login" routerLinkActive #loginLinkRef="routerLinkActive">

    Login

  </a>

</li>


查看完整回答
反對(duì) 回復(fù) 2023-10-24
  • 1 回答
  • 0 關(guān)注
  • 125 瀏覽

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)