将类应用于嵌套 html 的不同 angular9 路线答案

【问题标题】：Different angular9 routes to apply class to nested html将类应用于嵌套 html 的不同 angular9 路线
【发布时间】：2021-08-09 00:42:22
【问题描述】：

将路由与 HTML 和 CSS 结合起来是一项挑战。我想要两条不同的路线，/layout1 和 /layout2 将导航链接的文本更改为粗体。 “livemaps-bold”类具有这种风格。下面隐藏一个链接然后将它们放入一个包含 div 的方法是所有工作都可以让两条不同的路线同时影响共享区域中的任何内容。我已经尝试了很多东西，到目前为止，这是行之有效的。重要的是要了解只有两个链接，只是有多个路线会影响这两个链接的外观。

理想情况下，我可以在同一个 div 中对两条路线进行 OR - 第一个 div 符合标准且符合预期，是一个很好的例子。第二个 div 是我想让两条不同的路线更改相同的链接文本的地方。很好，两者都会影响包含的 div 并且它可以工作，但是它仍然只适用于父 div。我需要它来应用链接。

出于创意，我可以对父 div 进行一些样式更改，但这不是我想要的效果。

        <div class="icon-builder"> <a mat-button  routerLink="/builder/builderdashboard" color="primary">
          <span  class="icon-titles" routerLinkActive="titles-bold><i class="fas fa-layer-plus"></i>  BUILDER</span></a>
        </div>

      <div routerLinkActive="livemaps-bold">
        <a routerLink="/livemaps/layout1"> <i class="fas fa-map-marked-alt"></i> LIVE PARK DATA</a>
        <a routerLink="/livemaps/layout2" style="display: none">Home</a>

      </div>

【问题讨论】：

你能简单解释一下吗？

标签： javascript angular routes angular9 angular-router

【解决方案1】：

你能在每个a标签上加一个routerLinkActive吗？

<div>
        <a routerLinkActive="class1 class2" routerLink="/livemaps/layout1"> <i class="fas fa-map-marked-alt"></i> LIVE PARK DATA</a>
        <a routerLinkActive="class3 class4" routerLink="/livemaps/layout2" style="display: none">Home</a>

      </div>

【讨论】：

不，不幸的是，这不起作用，因为第二个链接必须引用第一个链接，其中包含我们要显示的链接文本。所做的只是隐藏第二个链接。

【解决方案2】：

我最终只是隐藏和调整了我的样式表。这不是我的理想想法，但由于我在 CSS 方面做得更好，所以效果很好。

   <div routerLinkActive="livemaps-highlight-div" id="livemaps-square">
        <a routerLink="/livemaps/layout1">
          <span>&nbsp;&nbsp;&nbsp;<i class="fas fa-map-marked-alt"></i> &nbsp;&nbsp;LIVE PARK DATA</span></a>
        <a routerLink="/livemaps/layout2" style="display: none">Home</a>

      </div>

【讨论】：