从模板调用方法不起作用（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，切换类/样式应该不是问题。