javascript - current - Obtener URL actual en angular

get actual url angular 2

Question

Esta pregunta ya tiene una respuesta aquí:

• Cómo obtener la ruta actual 30 respuestas

¿Cómo puedo obtener la url actual en Angular 4? Lo he buscado mucho en la web, pero no puedo encontrar la solución.

app.module.ts

import { BrowserModule } from ''@angular/platform-browser'';
import { NgModule } from ''@angular/core'';
import { RouterModule, Router } from ''@angular/Router'';

import { AppComponent } from ''./app.component'';
import { TestComponent } from ''./test/test.component'';
import { OtherComponent } from ''./other/other.component'';
import { UnitComponent } from ''./unit/unit.component'';

@NgModule ({
  declarations: [
    AppComponent,
    TestComponent,
    OtherComponent,
    UnitComponent
  ],

  imports: [
    BrowserModule,
    RouterModule.forRoot([
        {
            path: ''test'',
            component: TestComponent
        },
        {
            path: ''unit'',
            component: UnitComponent
        },
        {
            path: ''other'',
            component: OtherComponent
        }
    ]),
  ],

  providers: [],
  bootstrap: [AppComponent]
})

export class AppModule { }

app.component.html

<!-- The content below is only a placeholder and can be replaced -->
<div>
    <h1>Welcome to {{title}}!!</h1>

    <ul>
        <li>
            <a routerLink="/test">Test</a>
        </li>
        <li>
             <a routerLink="/unit">Unit</a>  
        </li>
        <li>
            <a routerLink="/other">Other</a>
        </li>
    </ul>
</div>
<br/>
<router-outlet></router-outlet>

app.component.ts

import { Component} from ''@angular/core'';

@Component ({
    selector: ''app-root'',
    templateUrl: ''./app.component.html'',
    styleUrls: [''./app.component.css'']
})

export class AppComponent{
    title = ''Angular JS 4'';
    arr = [''abcd'',''xyz'',''pqrs''];
}

other.component.ts

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

@Component({
  selector: ''app-other'',
  templateUrl: ''./other.component.html'',
  styleUrls: [''./other.component.css'']
})

export class OtherComponent implements OnInit {

    public href: string = "";
    url: string = "asdf";

    constructor(private router : Router) {}

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

test.component.ts

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

@Component({
  selector: ''app-test'',
  templateUrl: ''./test.component.html'',
  styleUrls: [''./test.component.css'']
})

export class TestComponent implements OnInit {
    route: string;
    currentURL='''';

    constructor() { 
        this.currentURL = window.location.href; 
    }

    ngOnInit() { }
}

En este momento tengo un problema con la consola después de hacer clic en otro enlace

ERROR Error: Uncaught (in promise): Error: No provider for Router!

Answer 1

Con JavaScript puro:

console.log(window.location.href)

Usando angular:

this.router.url

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

@Component({
    template: ''The href is: {{href}}''
    /*
    Other component settings
    */
})
export class Component {
    public href: string = "";

    constructor(private router: Router) {}

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

El plunkr está aquí: plnkr.co/edit/0x3pCOKwFjAGRxC4hZMy?p=preview

Answer 2

Puede utilizar el servicio de ubicación disponible en @ angular / common y a través de este código a continuación puede obtener la ubicación o la URL actual

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

@Component({
  selector: ''app-top-nav'',
  templateUrl: ''./top-nav.component.html'',
  styleUrls: [''./top-nav.component.scss'']
})
export class TopNavComponent implements OnInit {

  route: string;

  constructor(location: Location, router: Router) {
    router.events.subscribe((val) => {
      if(location.path() != ''''){
        this.route = location.path();
      } else {
        this.route = ''Home''
      }
    });
  }

  ngOnInit() {
  }

}

Aquí está el enlace de referencia desde donde he copiado algo para obtener la ubicación de mi proyecto. https://github.com/elliotforbes/angular-2-admin/blob/master/src/app/common/top-nav/top-nav.component.ts

Answer 3

other.component.ts

Entonces la solución correcta final es:

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

/* ''router'' it must be in small case */

    @Component({
      selector: ''app-other'',
      templateUrl: ''./other.component.html'',
      styleUrls: [''./other.component.css'']
    })

    export class OtherComponent implements OnInit {

        public href: string = "";
        url: string = "asdf";

        constructor(private router : Router) {} // make variable private so that it would be accessible through out the component

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