title: Overriding routerLink and router.navigate
body: <p>I need to support having multitenant pages on my app. that said, my routes look like this:</p>
  <pre><code>/shop-x/products/123
  /restaurant-y/products/342
  </code></pre>
  <p>now, I want to modify routerLink and router.navigate to be able to (without changing entire codebase):</p>
  <pre><code>router.navigate(&quot;/products/123&quot;)
  routerLink=&quot;/products/123&quot;
  </code></pre>
  <ol>
  <li>It’s easy to make a new custom router to support .navigate depending on state.</li>
  <li>but I don’t see a way to override routerLink that <code>“/products/123”</code> translates to <code>“/shop-x/products/123”</code>, depending on app state. I tried to extend routerLink directive to override <code>get routerLink()</code> method, but it sets the variable <code>this.classes</code> which is private, so I cannot modify that. If I make a new directive, <code>routerLinkActive</code> directive won’t work, and so on.
  What do you think, what is the way to do that?</li>
  </ol>
  <p>I want to modify this method:
  <a href="https://github.com/angular/angular/blob/5205db5564f21c214a96000e018a08f3de7d44d8/packages/router/src/directives/router_link.ts#L201-L207" rel="nofollow noreferrer">https://github.com/angular/angular/blob/5205db5564f21c214a96000e018a08f3de7d44d8/packages/router/src/directives/router_link.ts#L201-L207</a></p>