How do I string a relative path

Question

I would like to create a link for users to click on to verify their e-mail. To do that I would need to create the link. How do I convert a this.router to string? I would also need to retrieve the user's user id. If that is not possible, can I create a string that passes in the relative path?

I tried this:

let loginRoute = this.router.navigateByUrl("./login", {
      queryParams: { key: data.id }
});

but obviously it does not work since it .navigateByUrl returns a boolean result.

you can use ActivatedRoute.params then subscribe parameter from ur router. — Nuttertools, May 16 '19 at 03:45
Answer in the below link might help solve your issue! [Answer](https://stackoverflow.com/a/37622179/9997860) — Thivagar, May 16 '19 at 04:04
@Thivagar i do not want to navigate to the page. what i would like to do is to get the relative path and convert it to a string — mhfour, May 16 '19 at 04:09
you want string URL with user id like this http://example.com/user/10, Right? — Sunil Kashyap, May 16 '19 at 04:38

RemyaJ · Answer 1 · 2019-05-17T10:13:10.980

1

 constructor(private route: ActivatedRoute) {}

  ngOnInit() {
    this.sub = this.route.params.subscribe(params => {
       this.id = +params['id'];
    });

This can get you the id in the query param.

If you want the domain, please do this -

const parsedUrl = new URL(window.location.href);
const baseUrl = parsedUrl.origin;
console.log(baseUrl);

edited May 17 '19 at 10:13

answered May 16 '19 at 04:27

RemyaJ

5,358
4
22
41

what would be the datatypes for `this.sub` and `this.id`? i'm getting errors where i need to convert them to string – mhfour May 16 '19 at 05:10
id: number; sub: Subscription – RemyaJ May 17 '19 at 10:08

Sunil Kashyap · Answer 2 · 2019-05-16T06:49:42.650

1

Use DOCUMENT and Router to make the URL String with Params.

import DOCUMENT into a component from platform-browser and Router form @angular/router

import { DOCUMENT } from '@angular/platform-browser';

import { Router } from '@angular/router';

Initialize constructor

  constructor(
    private router: Router,
    @Inject(DOCUMENT) private document: any
  ) {}

make URL using

  ngOnInit() {
    let domain = this.document.location.hostname;
    this.href = this.router.url;
    console.log(domain+this.href)
  }

Working Sample - Stackblitz code is in the child-one component

------------ EDITED AFTER COMMENTS -------------

use DOCUMENT to get domain/hostname and concat parameters to that domain.

import { DOCUMENT } from '@angular/platform-browser';
import {ActivatedRoute} from '@angular/router';
constructor(
        @Inject(DOCUMENT) private document: any,
        private route:ActivatedRoute

      ) {}

ngOnInit() {
        let domain = this.document.location.hostname;
        let userId = this.route.snapshot.params['userId'];
        console.log(domain+'?user='+userId)
      }

edited May 16 '19 at 06:49

answered May 16 '19 at 04:59

Sunil Kashyap

2,946
2
15
31

i dont think this solution works. this uses the current url. for my case, I would like to convert a relative path (not the current url) into a string, whilst adding the user's id at the back – mhfour May 16 '19 at 05:08
i am doing this in my authentication service. after adding the data to database, i will get the id created as my parameters – mhfour May 16 '19 at 05:26
can you post an example URL which you are trying to create? and also parameter getting via service – Sunil Kashyap May 16 '19 at 05:28
the example: http://localhost:4200/login?uid=. this is in the developer mode so when i go to the live website, it needs to change to website.com/login?uid=. hence why i would like to string a relative path – mhfour May 16 '19 at 05:36
so basically you just want a current domain name and you already know how to get other parameters like /login?uid= – Sunil Kashyap May 16 '19 at 06:02
for that, you can use DOCUMENT as in answer to get a current domain name, for example, if the current server is localhost then this.document.location.hostname returns localhost:4200 and in the server, it returns website.com and concat parameters and generates URL. – Sunil Kashyap May 16 '19 at 06:45

How do I string a relative path

2 Answers2