在Angular中獲取當前網址

Question

如何在AngularJS 4中獲取當前網址？我在網上搜索了很多，但無法找到解決方案。

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() { } 
} 

現在我越來越控制檯發出點擊其他鏈接

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

Answer 1

使用純JavaScript：

console.log(window.location.href)

採用了棱角分明：

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); 
    } 
} 

的plunkr是在這裏：https://plnkr.co/edit/0x3pCOKwFjAGRxC4hZMy?p=preview

Answer 2

你之後可以使用@ angular/common中提供的位置服務，並通過下面的說明代碼，你可以得到的位置或當前URL

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() { 
    } 

} 

這裏是從哪兒我抄的東西來獲得位置爲我的項目的參考鏈接。 https://github.com/elliotforbes/angular-2-admin/blob/master/src/app/common/top-nav/top-nav.component.ts

Answer 3

你可以試試這個代碼。

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

@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'] 
}) 
export class AppComponent { 
    title = 'app'; 
    currentURL=''; 
    constructor() { 
     this.currentURL=window.location.href; 
    } 

} 

Answer 4

other.component.ts

所以最終正確的解決辦法是：

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); 
     } 
    }