在 Angular 中获取当前 url [英] Get current url in Angular

问题描述

如何在 Angular 4 中获取当前网址?我在网上搜索了很多，但找不到解决方案.

app.module.ts

import { BrowserModule } from '@angular/platform-b​​rowser';从'@angular/core'导入{ NgModule }；从'@angular/Router'导入{RouterModule，Router}；从'./app.component'导入{AppComponent}；从'./test/test.component'导入{TestComponent}；从'./other/other.component'导入{OtherComponent}；从'./unit/unit.component'导入{ UnitComponent }；@NgModule ({声明:[应用组件，测试组件，其他组件，单元组件],进口:[浏览器模块，RouterModule.forRoot([{路径:'测试'，组件:测试组件},{路径:'单位'，组件:单元组件},{路径:'其他'，组件:其他组件}]),],提供者:[]，引导程序:[AppComponent]})导出类 AppModule { }

app.component.html

<h1>欢迎来到{{title}}！！</h1><ul><li><a routerLink="/test">测试</a></li><li><a routerLink="/unit">单位</a></li><li><a routerLink="/other">其他</a></li></ul></div><br/><路由器插座></路由器插座>

app.component.ts

从'@angular/core'导入{组件}；@零件 ({选择器:'应用程序根'，templateUrl: './app.component.html',styleUrls: ['./app.component.css']})导出类 AppComponent{标题 = 'Angular JS 4';arr = ['abcd','xyz','pqrs'];}

other.component.ts

import { Component, OnInit } from '@angular/core';从'@angular/common'导入{位置}；从'@angular/router'导入{路由器}；@零件({选择器:'应用程序其他'，templateUrl: './other.component.html',styleUrls: ['./other.component.css']})导出类 OtherComponent 实现 OnInit {公共href:字符串="；网址:字符串=asdf"；构造函数(私有路由器:路由器){}ngOnInit() {this.href = this.router.url;console.log(this.router.url);}}

test.component.ts

import { Component, OnInit } from '@angular/core';从'@angular/common'导入{位置}；从'@angular/router'导入{路由器}；@零件({选择器:'应用测试'，templateUrl: './test.component.html',styleUrls: ['./test.component.css']})导出类 TestComponent 实现 OnInit {路线:字符串；当前网址='';构造函数(){this.currentURL = window.location.href;}ngOnInit() { }}

现在我在点击其他链接后遇到控制台问题

ERROR 错误:未捕获(承诺):错误:路由器没有提供程序！

解决方案

使用纯 JavaScript:

console.log(window.location.href)

使用 Angular:

this.router.url

从'@angular/core'导入{组件}；从'@angular/router'导入{路由器}；@零件({模板:'href是:{{href}}'/*其他组件设置*/})导出类组件 {公共href:字符串="；构造函数(私有路由器:路由器){}ngOnInit() {this.href = this.router.url;console.log(this.router.url);}}

plunkr 在这里:https://plnkr.co/edit/0x3pCOKwFjAGRxC4hZMy?p=preview

How can I get the current url in Angular 4? I've searched the web for it a lot, but am unable to find solution.

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

Right now I am getting console issue after clicking on other link

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

解决方案

With pure JavaScript:

console.log(window.location.href)

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

The plunkr is here: https://plnkr.co/edit/0x3pCOKwFjAGRxC4hZMy?p=preview

这篇关于在 Angular 中获取当前 url的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！