從模板調用方法不起作用（Angular 5）

Question

我確信幾乎每個開發人員都使用過Angular的功能，並且這種功能通常很完美：從模板中調用方法。 我已經做了幾個月了，到目前為止我還沒有遇到任何問題。

到現在。

我有一個菜單組件，該組件可以從數據庫動態加載菜單項，並將其繪制在可視組件中。 每個端點都有一個用於遍歷視圖的routeLink。 這完美地工作，並且沒有任何麻煩。

問題在於，現在我想以某種方式保留這些routeLinks（“ a”元素），因此菜單還告訴用戶他當前所在的視圖。 我的方法是讓“ a”元素的顏色為橙色（如果未選擇），而為灰色。 因此，我將檢查最新類別和最終端點是否具有布爾值，以確定“ a”元素文本必須是橙色還是灰色。

這是模板的結尾部分，嵌入在兩個ngFors中，它們遍歷類別和子類別：

            <a [routerLink]="thirdLevel.url" 
              [style.color]="checkSelectedUrl(subcategory.key, thirdLevel.key) ? 'orange' : 'gray'"
              class="menu-third-level lvl2" 
              [routerLinkActive]="active-route" 
              [style.marginTop]="isFirst ? '-20px' : '0px'">
        {{ thirdLevel?.title?.toUpperCase() }} </a>

如您所見，它調用“ checkSelectedUrl”，這是同一組件中的方法，如下所示：

checkSelectedUrl(subcategory, endpoint){
    console.log("CHECKING SELECTED URL")
    const parts = window.location.href.split("/")
    const endpointR = parts[parts.length - 1];
    const subcategoryR = parts[parts.length - 2];

    console.log(">>> ", endpointR == endpoint);
    console.log(">>> ", subcategory == subcategoryR);

    return endpointR == endpoint && subcategory == subcategoryR;
}

如您所見，它具有一些控制台日志以檢查其是否正常運行。 而且它們從未顯示。 此方法永遠不會執行，就像模板由於某種原因而無法調用它（可能是由於routeLink引起的），但我絕對不知道。

模板為什么不能調用此方法？ 我該如何解決這個問題？

謝謝！

編輯：這是整個模板：

<div class="menu-container">
  <div class="row header">
    <img class="logo" src="../../../assets/menu-header.PNG">
    <div class="row top-right-buttons" *ngIf="menuData">
      <div class="col-md-3 top-menu-item" (click)="topMenuActivity('runs', runsmodal)">
        <i class="fa fa-calendar top-icon"></i>
        <span class="top-menu-text">RUNS</span>
      </div>
      <div class="col-md-3 top-menu-item" (click)="topMenuActivity('op-service', servicemodal)">
        <i class="fa fa-envelope-o top-icon"></i>
        <span class="top-menu-text">SERVICE</span>
      </div>
      <div class="col-md-3 top-menu-item" (click)="topMenuActivity('user', usermodal)">
        <i class="fa fa-user top-icon"></i>
        <span class="top-menu-text">USER</span>
      </div>
      <div class="col-md-3 top-menu-item" (click)="topMenuActivity('logout', null)">
        <i class="fa fa-power-off"></i>
        <span class="top-menu-text">LOGOUT</span>
      </div>
    </div>
  </div>
  <div class="row menu-btn">
    <div class="ext-menu-btn" (click)="openMenu()" *ngIf="menuData">
      <span class="menu-span" [@menuStringAnim]="active">MENU</span>
      <i class="fa fa-bars menu-icon" [@menuIconAnim]="active"></i>
    </div>
  </div>
</div>
<div class="menu-list" [@menuListAnim]="active" *ngIf="menuData">
  <div class="inner-menu-btn" (click)="openMenu()">
    <span class="menu-span-inner" style="left: 35px">MENU</span>
    <i class="fa fa-arrow-left menu-close-btn"></i>
  </div>
  <div class="row row-fix " *ngFor="let category of getCategories()">
    <div class="little-menu-bar-toplvl" *ngIf="categoriesNavigator.lvl0 == category.key">
    </div>
    <p class="menu-top-level lvl0" (click)="openCategory(category)">{{ category?.title?.toUpperCase() }} </p>
    <div *ngIf="categoriesNavigator.lvl0 && categoriesNavigator.lvl0 == category.key" class=" second-level-row">
      <br>
      <span class="little-menu-bar-midlvl"></span>
      <div class="row row-fix" *ngFor="let subcategory of getSubcategories(category.key)">
        <p class="menu-second-level lvl1" (click)="openSubcategory(subcategory)">{{ subcategory?.title?.toUpperCase() }} </p>
        <div *ngIf="categoriesNavigator.lvl1 == subcategory.key">
          <br>
          <div class="row row-fix " *ngFor="let thirdLevel of getThirdLevel(category.key, subcategory.key); first as isFirst">
            <div class="little-menu-bar-lowlvl" *ngIf="categoriesNavigator.lvl0 == category.key"></div>

            <a [routerLink]="thirdLevel.url" 
                  [style.color]="checkSelectedUrl(subcategory.key, thirdLevel.key) ? 'orange' : 'gray'"
                  class="menu-third-level lvl2" 
                  [routerLinkActive]="active-route" 
                  [style.marginTop]="isFirst ? '-20px' : '0px'">
            {{ thirdLevel?.title?.toUpperCase() }} </a>

            <!--  <a href="thirdLevel.url" class="menu-third-level lvl2" [style.marginTop]="isFirst ? '-20px' : '0px'">{{ thirdLevel?.title?.toUpperCase() }} </a>
   !-->
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

您可以檢查router.url === thirdLevel.url是否看起來像[ngStyle]="{'color': router.url === thirdLevel.url ? 'green' : 'red' }"

嗯，如果您有/shop/category/books路由，則需要獲取URL的最后一部分並將其與生成的URL進行比較。 我不知道它在您的應用程序中到底是什么樣子，但是此解決方案應該可以使其正常工作。 但這仍然只是解決方法。

它也可以與[ngClass] 。

如果您想對其進行快速檢查，則添加直接URL而不是thirLevel.url，例如[ngStyle]="{'color': router.url === '/signin' ? 'green' : 'red' }" 。 在控制台中檢查是否添加了顏色。

您的checkSelectedUrl函數並不是真正的角度處理方法。 您具有路由器模塊，該模塊可為您提供所需的信息，並且如果您可以訪問活動的路由URL，則切換類/樣式應該不是問題。