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

Question

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

<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 во второй раз, ссылка станет оранжевой или нет.

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