The first variable in the .navigate off of the Router of @angular/router can concatenate an array of strings for a URL.

this.router.navigate([this.foo, this.bar], { relativeTo: this.baz });

 
 

So if foo above holds /recreation/companionship/pets/ and bar holds "kittens" then we are going off to http://www.example.com/#/recreation/companionship/pets/kittens alright? What is above kinda assumes wireups like so:

1. import { Router } from '@angular/router';
2. constructor(private router: Router) {

 
 

A way to do this sort of thing inside of an HTML tag in a template is like so:

<a [routerLink]="[this.foo, this.bar]">