获取Angular中的当前url

如何在Angular 4中获取当前url ?我已经在网上搜索了很多,但我无法找到解决方案。

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!
609914 次浏览

你可以使用@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 < / p >

纯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

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