Как добавить класс 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, но как их использовать со внутристраничной ссылкой (а не как простую ссылку между страницами)


angular routerlinkactive routerlink
person Gil Epshtain    schedule 20.01.2018    source источник

Ответы (2)


arrow_upward
1
arrow_downward

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

пример:

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

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

clicked(object) {
    this.pageid= object;
}
person Asura    schedule 20.01.2018
comment
да, это сработает, спасибо. НО это установит активный класс при нажатии на ссылку. Но как установить активный класс при пролистывании раздела. Например, когда я прокручиваю до page2, я также хотел бы добавить активный класс. - person Gil Epshtain; 21.01.2018
comment
Я считаю, что это возможно только путем получения разрешения клиента через window.innerWidth/window.innerHeight, а затем с помощью события мыши, такого как mouseenter на странице, а затем изменения идентификатора страницы, когда координата мыши y передает определенный порог (значение y), которые зависят на разрешении клиента. - person Asura; 21.01.2018
comment
это не новая идея. Мне было интересно, можете ли вы использовать routerLinkActive, чтобы узнать, действительна ли ссылка, что-то вроде routerLinkActive='#ID' (это, конечно, недействительный код) - person Gil Epshtain; 21.01.2018
comment
routerLinkActive используется для добавления класса css к активному маршруту или назначения переменной шаблона, пример того, что можно сделать с routerLinkActive с помощью routerLinkActiveOptions: angular.io/api/router/RouterLinkActive - person Asura; 21.01.2018

arrow_upward
0
arrow_downward

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

person user3121362    schedule 20.01.2018
comment
Я использую Bootstrap, я просто не хотел добавлять это в пример кода, чтобы сделать код более понятным. - person Gil Epshtain; 20.01.2018
comment
о, хорошо, вы можете просто использовать div.active в CSS, который я сделал в примере [здесь] (jsfiddle.net/up4nu/7221 ) - person user3121362; 20.01.2018
comment
используя Angular, а не jQuery - person Gil Epshtain; 20.01.2018