更新信号后组件未更新

Question

成功更新信号后，我的组件似乎没有更新。

我尝试使用控制台日志对其进行调试，但这仅确认了信号已正确更新。但由于某种原因，我的导航栏组件没有以正确的颜色重新渲染。

这是一个解决问题的 stackblitz。

https://stackblitz.com/edit/stackblitz-starters-saszen?file=src%2Fapp%2Fnavbar%2Fnavbar.component.ts

我想要的是导航栏项目具有不同的活动颜色。当鼠标悬停在主页上时，它应该具有与关于页面不同的下划线颜色。

Answer 1

看来是routerLinkActive的更新顺序和执行逻辑问题 https://github.com/angular/angular/blob/main/packages/router/src/directives/router_link_active.ts#L211

我建议您使用一个静态类作为活动链接并修改其在 css 中的外观

        <a
          routerLink=""
          [routerLinkActiveOptions]="{ exact: true }"
          routerLinkActive="active-link"
      
          class="hover-{{ hoverColor }} active-link-{{ activeColor }}"
        >
          Home
        </a>

.active-link.active-link-lilac {
  text-decoration-color: var(--lilac);
}