Как мне получить URL в угловых?

Question

Мне нужно, чтобы моя кнопка гамбургера была гамбургером или крестиком в зависимости от URL. Поэтому мне нужно получить мой текущий URL.

Это то, что у меня сейчас есть:

Когда я нажимаю кнопку гамбургера, представление переключается на представление настроек (как и предполагалось), и мой URL-адрес меняется на "http://localhost:4200/settings",, но когда я пытаюсь получить URL-адрес, он возвращает просто '/'.

header.component.ts

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.css']
})
export class HeaderComponent implements OnInit {

public href: string = "";

  constructor(private router: Router) { }


  ngOnInit() {
    this.href = this.router.url;
        console.log(this.router.url);
  }

}

########## EDIT #############

Ответ Альваро сработал, но он обновляет страницу (я не думал об этом раньше, извините). И я просто хочу, чтобы это изменило представление и не обновляло страницу.

Сейчас у меня есть:

header.component.html

<div class="hamburguer">
        <a (click)="getUrl(); showFirst=!showFirst;">
            <img *ngIf="!showFirst" src="assets/images/hamburguer.png" id="hamburguer">
            <img *ngIf="showFirst" src="assets/images/cross.png" id="hamburguer">
        </a>
</div>

header.component.ts

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { Location } from '@angular/common';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.css']
})
export class HeaderComponent implements OnInit {

  constructor(private router: Router, private _location: Location) { }

  getUrl(){

    if(window.location.pathname != "/settings"){
        window.location.pathname = "/settings";
    }else{
        this._location.back();
    }

  }

  ngOnInit() {
  }

}

Вот видео: https://vimeo.com/342053009

Answer 1

Вы можете получить его с чистым JavaScript: window.location.pathname

Или используйте ActivatedRoute , а также подписывайтесь на его события URL. Вот пример:

constructor(public activatedRoute: ActivatedRoute) {

   activatedRoute.url.subscribe(url => {
       // do what you need here
   }
}

И для импорта ActivatedRoute добавьте следующую строку:

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

Надеюсь, это поможет!

Answer 2

Попробуйте это:

 import { Location } from "@angular/common";

 url: string;
 constructor(location: Location) {
    this.url = location.path();
 }