将路由与HTML和CSS结合起来是一个挑战。我想要两条不同的路线/layout1和/layout2将导航链接的文本更改为粗体。类"；livemaps粗体"；有那种风格。下面的方法隐藏一个链接，然后将它们放入一个包含div的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>
你能在每个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> <i class="fas fa-map-marked-alt"></i> LIVE PARK DATA</span></a>
<a routerLink="/livemaps/layout2" style="display: none">Home</a>
</div>