Угловые как стиль роутерLink

Question

В моем приложении много строк таблицы.Некоторые ссылки, некоторые нет.Вот пример одного из них:

<tr [routerLink]="['/invoices', invoice?.invoice.id || 0, 'sms']">

Я хочу стилизовать все tr с помощью routerLink следующим образом:

tr[routerLink] {
   cursor: pointer;
}

Но это не работает.Какой правильный CSS здесь?спасибо

Answer 1

В вашем случае проблема из-за ' []' этих скобок

, так что если вы хотите определить, какая ссылка является, а какая нет, попробуйте следующий код

вот пример

<tr [routerLink]="['/invoices', invoice?.invoice.id || 0, 'sms']" routerLinkActive="active>

и style.css

tr[routerLinkActive] {
    color: red;
 }

вот Stackblitz демо

этот стиль применим только к тем ссылкам

Answer 2

Используйте скомпилированный атрибут ng-reflect-router-link: stackblitz

a[ng-reflect-router-link] {
  color: red;
  font-weight: 700;
}

tr[ng-reflect-router-link] {
  cursor: pointer;
}

Answer 3

HTML:

<a [routerLink]='link' [ngClass]="{'router-link-active': true">{{name}}</a>

css:

.router-link-active {
   cursor: pointer;
}