Как добавить класс CSS в активную внутристраничную ссылку (ссылка на хэштег) - Angular

У меня есть Angular, одностраничный сайт со следующим макетом

<body>
  <!-- Header -->
  <div class="header">
    <a [href]="{{ '#' + page1_Id }}">Page1</a>
    <a [href]="{{ '#' + page2_Id }}">Page2</a>
    <a [href]="{{ '#' + page3_Id }}">Page3</a>
  </div>

  <!-- Page1 -->
  <div [id]="page1_Id">
    I'm Page 1
  </div>
  <!-- Page2 -->
  <div [id]="page2_Id">
    I'm Page 2
  </div>
  <!-- Page3 -->
  <div [id]="page3_Id">
    I'm Page 3
  </div> 
</body>

(где pageN_Id является компонентом переменных)

Когда я нажимаю на ссылку ссылки заголовка N, окно переходит к странице N (используя навигацию по страницам, <a href="#someId">)

Теперь я хотел бы добавить "активный" css-класс к элементу a-link, когда ссылка была нажата.

Я знаю директивы routerLink а также routerLinkActive, но как использовать их со ссылкой внутри страницы (а не как простая ссылка между страницами)

Источник

2 ответа

Решение

Создайте переменную, которая будет указывать на идентификатор страницы ссылки href при нажатии.

пример:

 <a id="{{page1_Id}}" class="nav-link" [ngClass]="{ 'active': pageid== page1_Id  }" (click)="clicked(page1_Id )"></a>

Теперь в вашем компонентном файле.ts:

clicked(object) {
    this.pageid= object;
}
Источник

Вы можете использовать boostrap, чтобы сделать кодирование намного проще. Вот одна из функций начальной загрузки, которую вы ищете

Источник
Другие вопросы по тегам