Question

我想获得当前的网址。为此，我正在做

constructor(public router: Router) { ... }
ngOnInit() { console.log(this.router.url); }

它运作正常。但现在我想把它移动到布局组件，它是每个组件的父组件。我在<router-outlet></router-outlet>内有layoutcomponent。

当我在布局组件中记录此代码时，它会记录：/

我该怎么办？

Answer 1

您可以使用路由器事件并订阅它

constructor(router: Router) {
    this.router.events.subscribe((event: Event) => {
        console.log(event.url); // This will give you the required url
    });
}

Answer 2

已经提到的路由器方法是一个有效的方法来获取您的应用程序中的相对URL。例如，如果您有本地网站：http://localhost:3000/my/fine/site

在订阅路由器事件和记录更新值的第一个答案中已经提到的方法对于获取应用程序中的相对路径非常有用：

constructor(router: Router) {
this.router.events.subscribe((e: Event) => {
            console.log("Relative URL is: ", event.url);
    });
}

相对网址是：/ my / fine / site

如果你想得到完整的网址，你可以随时在你的角度应用中使用vanilla JS：

console.log("FULL URL is: ", window.location.href);

完整网址为：http://localhost:3000/my/fine/site

缺点是它不是订阅价值，因此它不会更新视图更改（不会重新加载窗口的更改）...除非您合并使用vanilla JS url的事件监听器，使您可以轻松访问以下任一值：

constructor(router: Router) {
this.router.events.subscribe((e: Event) => {
            console.log("Relative URL is: ", event.url);
            console.log("Updated FULL URL is: ", window.location.href);
    });
}

相对URL是：/ my / fine / site / pagechange

更新后的完整网址为：http://localhost:3000/my/fine/site/pagechange

当我想要社交分享链接的当前完整网址时，这很方便，但是在路由器插座之外。有人说Angular可能会解决在获取网址时缺乏便利性的问题。在路由器出口外面的params（目前必须做一点点走树 - 这可能是脆弱的）。 https://github.com/angular/angular/issues/11023

Answer 3

如果您直接在事件上使用event.url订阅功能角度抛出错误

财产＆＃39; url＆＃39;类型＆＃39;事件＆＃39;
上不存在
财产＆＃39; url＆＃39;在＆＃39; RouteConfigLoadStart＆＃39;。
类型中不存在

您最好使用以下内容来避免此类错误：首先，您必须从Event, Router导入@angular/router

import { Router, Event } from @angular/router; // Include top on your component

然后在构造函数上注入Router以访问当前状态

constructor(private route: Router){}

最后，您检查event是NavigationEnd的实例，在ngOnInit()函数

中添加此代码

this.subscription = this.route.events.subscribe((event:Event) => {
    if(event instanceof NavigationEnd ){
      console.log(event.url);
    }
});

Answer 4

您可以尝试以下方法：

import { Router, NavigationEnd  } from '@angular/router'; 
constructor( private router: Router) {} 
ngOnInit() {
    this.router.events.subscribe(e => {
     if (e instanceof NavigationEnd) {
       console.log(e.url);
      }
    });
}

获取路由器插座外的当前URL

4 个答案: