CSS not applied to link when active

Question

I have the following link:

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

And the following CSS:

a.active {
  color: orange;
}

The component that contains this HTML and CSS is:

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

export class MenuComponent {

  @Input() menuType: string;

  constructor(private route: ActivatedRoute) { }

}

If I click the link the anchor has the class active and is orange.

But if I ran the the following command from another component:

  this.tagService.create(tagName).subscribe(

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

  );

In this case I am redirect to the page, the link has the active class but it is not orange.

Any idea what am I missing?

Update

After some tests I found out that the link becoming orange does not depend on using:

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

Consider the steps:

1. Click on link /posts/1/about that goes to page /posts/1/about.

2. Click on a link that opens a Modal with a form and click save that runs:

   this.tagService.create(tagName).subscribe(

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

   );

   I am redirected to /posts/1/about and the link is orange as expected.

3. Click on a link that opens the Modal again and do the same as in (2).

   I am redirected as expected but now the menu is not orange ...

It seems that the way I got to the page before opening the modal, clicking a link or using this.router.navigate, makes the link to become orange or not after I use this.route.navigate a second time.

Isn't this strange?