CSS не применяется к ссылке, когда она активна

У меня есть следующая ссылка:

<a [routerLink]="['/posts', id, 'about']" routerLinkActive="active">Post</a>

И следующий CSS:

a.active {
  color: orange;
}

Компонент, содержащий этот HTML и CSS:

@Component({
  selector: 'menu',
  templateUrl: './menu.component.html',
  styleUrls: ['./menu.component.less']
})

export class MenuComponent {

  @Input() menuType: string;

  constructor(private route: ActivatedRoute) { }

}

Если я щелкну ссылку, якорь будет иметь класс active и оранжевый.

Но если бы я запустил следующую команду из другого компонента:

  this.tagService.create(tagName).subscribe(

    (next) => { 
      this.router.navigate(['/posts', next.postId, 'about' ]);
    }

  );

В этом случае я перенаправляюсь на страницу, ссылка имеет класс active, но не оранжевого цвета.

Есть идеи, что мне не хватает?

Обновить

После некоторых тестов я обнаружил, что ссылка становится оранжевой не зависит от использования:

.active {color: orange;}
a.active {color: orange;}
a[routerLinkActive="active"] {color:orange;}

Рассмотрим шаги:

1. Щелкните ссылку /posts/1/about, которая ведет на страницу /posts/1/about.

2. Щелкните ссылку, которая открывает модальное окно с формой, и нажмите кнопку сохранить, которая запустится:

   this.tagService.create (tagName) .subscribe (

   (next) => { 
     this.router.navigate(['/posts', next.postId, 'about' ]);
   }
   

   );

   Я перенаправлен на /posts/1/about, и ссылка, как и ожидалось, оранжевая.

3. Щелкните ссылку, которая снова открывает модальное окно, и сделайте то же, что и в (2).

   Меня перенаправили, как и ожидалось, но теперь меню не оранжевого цвета ...

Кажется, что способ, которым я попал на страницу до открытия модального окна, щелчка по ссылке или использования this.router.navigate, делает ссылку оранжевой или нет после того, как я использую this.route.navigate во второй раз.

Разве это не странно?