Angular 7：子域不可知路由器/ routerLink

Question

I want to use URLs that use subdomains for usernames. Eg the user 'joe' will get his own space at https://joe.example.com/

The 'www' subdomain will hold the functionality common to all users - eg signup or news or whatever. My webserver responds to all *.example.com requests with the same content. I want to create links from www.example.com to joe.example.com and vice versa like https://joe.example.com/myparam/myvalue

Currently [routerLink]="['myparam', 'myvalue'] only creates links within the same subdomain. I need to add the subdomain somehow.

I know that the whole application has to be re-initialized with every subdomain change. But I want to give it a try.

What is the best way to realize this using Angular 7?

Thank you!

Best, Malte

Answer 1

I have created a directive vafLink that replaces the standard routerLink . The first array element will be parsed as the target subdomain. If it equals to the current subdomain, the standard angular router will be used to update the view. Otherwise the window.location.href will be changed to the target URL and the browser loads the new subdomain and its content.

Here is the code (be careful, I'm new to Angular - started three days ago):

import { Directive, OnChanges, HostBinding, Input, HostListener } from '@angular/core';
import { Router } from '@angular/router';
import { SubdomainService } from './subdomain.service';
import { environment } from '../environments/environment';

@Directive({
  selector: ':not(a):not(area)[vafLink]'
})
export class VaflinkDirective implements OnChanges {
  private commands: any[] = [];
  private href: string;
  @Input() fragment !: string;

  constructor(
    private router: Router,
    private subdomain: SubdomainService) { }

  @Input()
  set vafLink(commands: any[]|string) {
    if (commands != null) {
      this.commands = Array.isArray(commands) ? commands : [commands];
    } else {
      this.commands = [];
    }
  }

  ngOnChanges(changes: {}): any { this.updateTargetUrlAndHref(); }

  private updateTargetUrlAndHref(): void {
    if (this.commands.length == 0) {
      this.href = 'https://' + this.subdomain.getSubdomain() + '.' + environment.Domain + '/'
      return;
    }

    this.href = 'https://' + this.commands[0] + '.' + environment.Domain + '/' + this.commands.slice(1, this.commands.length).join('/');
    if (this.fragment) {
      this.href += '#' + this.fragment;
    }
  }

  @HostListener('click')
  onClick(): boolean {
    if (this.commands.length == 0) {
      this.router.navigate([], {fragment: this.fragment});
      return false;
    }

    if (this.subdomain.getSubdomain() != this.commands[0]) {
      window.location.href = this.href;
    } else {
      this.router.navigate(this.commands.slice(1, this.commands.length), {fragment: this.fragment});
    }
    return false;
  }
}


@Directive({
  selector: 'a[vafLink],area[vafLink]'
})
export class VaflinkDirectiveWithHref implements OnChanges {
  @HostBinding() href !: string;
  @Input() fragment !: string;

  private commands: any[] = [];

  constructor(
    private router: Router,
    private subdomain: SubdomainService) { }

  @Input()
  set vafLink(commands: any[]|string) {
    if (commands != null) {
      this.commands = Array.isArray(commands) ? commands : [commands];
    } else {
      this.commands = [];
    }
  }

  ngOnChanges(changes: {}): any { this.updateTargetUrlAndHref(); }

  private updateTargetUrlAndHref(): void {
    if (this.commands.length == 0) {
      this.href = 'https://' + this.subdomain.getSubdomain() + '.' + environment.Domain + '/'
      return;
    }

    this.href = 'https://' + this.commands[0] + '.' + environment.Domain + '/' + this.commands.slice(1, this.commands.length).join('/');
    if (this.fragment) {
      this.href += '#' + this.fragment;
    }
  }

  @HostListener('click', ['$event.button', '$event.ctrlKey', '$event.metaKey', '$event.shiftKey'])
  onClick(button: number, ctrlKey: boolean, metaKey: boolean, shiftKey: boolean): boolean {
    if (this.commands.length == 0) {
      this.router.navigate([], {fragment: this.fragment});
      return false;
    }

    if (this.subdomain.getSubdomain() != this.commands[0]) {
      window.location.href = this.href;
      return true;
    } else {
      this.router.navigate(this.commands.slice(1, this.commands.length), {fragment: this.fragment});
    }
    return false;
  }
}

This code is an adaption of the original routerLink code. The implementation misses a few features the original routerLink has.