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，则切换类/样式应该不是问题。

从模板调用方法不起作用（Angular 5）

1 个答案: