Angular 从模板调用方法不需要'；t工作（角度5）

有一种Angular的功能，我敢肯定几乎每个开发人员有时都会用到，而且通常工作得很完美：从模板调用方法。我已经做了几个月了，到目前为止我还没有遇到任何问题

直到现在

我有一个菜单组件，它从数据库动态加载菜单项，并在可视化组件中绘制它们。每个端点都有一个routeLink，用于遍历视图。这是完美的工作，没有任何问题

问题是，现在我想以某种方式保留这些RouteLink（“a”元素）处于选中状态，因此菜单还告诉用户他当前在哪个视图中。我的方法是，如果选择了“a”元素，则将其设置为橙色，如果未选择，则将其设置为灰色。因此，我将检查最新类别和最终端点，以获得一个布尔值，以确定“a”元素文本必须是橙色还是灰色

这是模板尾端，嵌入在两个NGFOR中，可遍历类别和子类别：

            <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>

正如您所看到的，它有一些控制台来检查它是否工作正常并且它们从未显示。这个方法从未执行过，好像模板因为某种原因无法调用它，可能是因为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>

跑
服务
使用者
注销
菜单
菜单
{{{category？.title？.toUpperCase（）}


{{{subcategory？.title？.toUpperCase（）}}


!-->

您可以检查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==='/sign'？'green'：'red'}”

。检查控制台中是否添加了颜色

---

您的

checkSelectedUrl

功能实际上并不是一种有角度的做事方式。您有路由器模块，它为您提供所需的信息，如果您可以访问活动的路由URL，切换类/样式应该不会有问题。

RouterLink活动-工作不正常？它应该将类添加到活动路由中，并且应该足以显示用户所在的位置。“活动”类别是否添加到活动路线？我想这应该是我要问的第一个问题，但您是否声明了将activeLink绑定到的活动变量？啊，如果您不需要双向数据绑定，只需执行routerLinkActive=“class”（不带[]）即可添加整个html模板。@Adriansawick是的，它对我不起作用，我不知道为什么，但它不会将css类应用于元素。必须添加整个模板…[RouterLink active]=“active route”将其更改为“active”您不能声明active route变量，然后在您的键入脚本部分添加public active=“您的类，例如“active route”，并将.active route类添加到您的css中。@Adriansawick我在css中声明了一个名为“active route”的类，它不应该像那样工作吗？

<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>