Question

我正在尝试使用路由器获取当前路由器路径，但是当我执行console.log(this.router.url)时它返回“/”，尽管我在“/ login”上。但是当我正在安慰整个this.router对象时，属性url的值为“/ login”。

这是来自app.component.ts的代码

export class AppComponent implements OnInit{
  constructor(private router: Router) {}

  ngOnInit(){
    console.log(this.router);
  }

}

app.module.routing.ts

import {NgModule} from '@angular/core';
import {PreloadAllModules, RouterModule, Routes} from '@angular/router';

import {NotFoundComponent} from './not-found/not-found.component';
import {AuthGuard} from './auth/auth-guard.service';

const appRoutes: Routes = [
  { path: '', loadChildren: './first/first.module#FirstModule'},
  { path: 'login', loadChildren: './login/login.module#LoginModule'},
  { path: '404', component: NotFoundComponent, canActivate: [AuthGuard] },
  { path: '**', redirectTo: '/404'}
];

@NgModule({
  imports: [RouterModule.forRoot(appRoutes, {preloadingStrategy: PreloadAllModules})],
  exports: [RouterModule]
})
export class AppModuleRouting {}

和FirstModule路由：

import {NgModule} from '@angular/core';
import {RouterModule, Routes} from '@angular/router';

import {FirstComponent} from './first.component';
import {AuthGuard} from '../auth/auth-guard.service';

const firstRoutes: Routes = [
  { path: '', component: FirstComponent, canActivate: [AuthGuard], children:[
    { path: '', loadChildren: './content-container/container.module#ContainerModule' }
  ]}
];
@NgModule({
  imports: [RouterModule.forChild(firstRoutes)],
  exports: [RouterModule]
})
export class FirstRoutes {}

Answer 1

我有同样的问题。 router.url返回一个斜杠，因为ngOnInit在主应用程序组件上运行时，路由是根目录。通过这样做，我获得了正确的url值。

$ ng --version                                                 

Angular CLI: 6.1.0-rc.0                                        
Node: 10.1.0                                                   
OS: win32 x64                                                  
Angular: 6.0.7                                                 
... animations, common, compiler, compiler-cli, core, forms    
... http, language-service, platform-browser                   
... platform-browser-dynamic, router                           

Package                      Version                           
------------------------------------------------------         
@angular-devkit/architect    0.7.0-rc.0                        
@angular-devkit/core         0.6.8                             
@angular-devkit/schematics   0.6.8                             
@angular/cdk                 6.3.1                             
@angular/cli                 6.1.0-rc.0                        
@angular/material            6.3.1                             
@schematics/angular          0.6.8                             
@schematics/update           0.7.0-rc.0                        
rxjs                         6.2.1                             
typescript                   2.7.2

希望有帮助。不适用于Angular Universal，但是...仍在设法弄清楚。

Answer 2

您可以使用Router服务（https://angular.io/api/common/Location）及其方法，而不必尝试使用Location（在导航生命周期的这一刻还无法为您提供最终路线） path，它将为您提供不带基本href的网址。相反，window.location.pathname不会意识到您的棱角玩具，会为您提供包括基本href在内的路径。

import { Location } from '@angular/common';

export class AppComponent implements OnInit {
  constructor(private location: Location) {}

  ngOnInit(){
    console.log(this.location.path());
  }

}

Answer 3

类型1.我们也可以使用window.location.pathname

Type 2.constructor(router: Router) { 

      router.events.subscribe((url:any) => console.log(url));

      console.log(router.url);  // to print only path eg:"/login"
}

Answer 4

如果您想在每次单击新链接/页面时获取网址，则应使用以下网址：

this.router.events.subscribe((routerData) => {
      if(routerData instanceof ResolveEnd){ 
         if(routerData.url === 'your url'){
           //Do something
         }
    } 
})

Answer 5

虽然我和其他人在寻找这个问题时会发现它已经 4 岁了。我在检查 AuthGuard CanActivate 接口类中的 url 时遇到了这个问题。对我来说，答案不起作用，因为此时守卫正在检查 URL，它在 Location 和 router.url 中都不可用。这对我有用：

const finalUrl = this.router.getCurrentNavigation()?.finalUrl;   
const isLoginPage = finalUrl?.root.children['primary'].segments[0]?.path === 'login';

this.router.getCurrentNavigation()?.finalUrl 返回一个使用起来可能有点复杂的 UrlTree，我上面的示例仅适用于“登录”将始终是我的第一个部分。为了更好地理解，您应该从文档中查看此示例用法：

@Component({templateUrl:'template.html'})
class MyComponent {
  constructor(router: Router) {
    const tree: UrlTree =
      router.parseUrl('/team/33/(user/victor//support:help)?debug=true#fragment');
    const f = tree.fragment; // return 'fragment'
    const q = tree.queryParams; // returns {debug: 'true'}
    const g: UrlSegmentGroup = tree.root.children[PRIMARY_OUTLET];
    const s: UrlSegment[] = g.segments; // returns 2 segments 'team' and '33'
    g.children[PRIMARY_OUTLET].segments; // returns 2 segments 'user' and 'victor'
    g.children['support'].segments; // return 1 segment 'help'
  }
}

https://angular.io/api/router/UrlTree#usage-notes

Angular router url返回斜杠

5 个答案: