Javascript 将类应用于嵌套html的不同angular9路由

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

理想情况下，我可以在同一个分区中对两条路线执行OR-第一个分区工作正常，正如预期的那样，是一个很好的示例。第二个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>

能否在每个
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>



实时公园数据
家
我最终只是隐藏和调整了我的样式表。这不是我理想的想法，但因为我更擅长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>


实时公园数据
家
您能简单解释一下吗？不，很遗憾，这不起作用，因为第二个链接必须引用第一个链接，其中包含我们要显示的链接文本。所做的只是隐藏第二个链接。