Блог

Главная - Вопросы по программированию - Различные угловые маршруты 9 для применения класса к вложенному html

Различные угловые маршруты 9 для применения класса к вложенному html

#javascript #angular #routes #angular9 #angular-router

Вопрос:

Это сложная задача-включить маршрутизацию с помощью HTML и CSS. Я хочу, чтобы два разных маршрута, /layout1 и /layout2, изменили текст моей навигационной ссылки на полужирный. Класс «живые карты-жирный» имеет такой стиль. Приведенный ниже метод сокрытия одной ссылки, а затем и помещения их в одну, содержащую div, — это все, что помогло заставить два разных маршрута влиять на что-либо в общей области одновременно. Я перепробовал много вещей, и до сих пор это то, что сработало. Важно понимать, что существует только ДВЕ ссылки, просто существует несколько маршрутов, которые влияют на внешний вид этих двух ссылок.

В идеале я мог бы выполнить ИЛИ для обоих маршрутов в одном и том же 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>

Комментарии:

1. Можете ли вы объяснить вкратце ?

Ответ №1:

Можете ли вы поставить по одной routerLinkActive на каждую a бирку?

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

Комментарии:

1. Нет, к сожалению, это не работает, потому что вторая ссылка должна ссылаться на первую, в которой есть текст ссылки, который мы хотим показать. Все, что вы делаете, — это скрываете вторую ссылку.

Ответ №2:

В итоге я просто спрятался и скорректировал свою таблицу стилей. Это не было моим представлением об идеале, но так как я намного лучше разбираюсь в CSS, это сработало отлично.

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

      </div>
Метки: