无法从Angular路由器获取路径或URL
无法从Angular路由器获取路径或URL
我无法从ActivatedRoute或Router导入中获取URL或路径。路径显示为空字符串""，URL显示为'/'。我记得以前使用的版本是可以的。唯一可以捕获正确路由的是Router.events。我也无法订阅ActivatedRoute中的URL。以下是代码：
import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute, NavigationEnd, RoutesRecognized } from '@angular/router';
@Component({
selector: 'api-dashboard',
templateUrl: './dashboard.component.html',
styleUrls: ['./dashboard.component.css']
})
export class DashboardComponent implements OnInit {
routePath: string = '';
constructor(
private _r: Router,
private _ar: ActivatedRoute
) { }
ngOnInit() {
this._r.events.subscribe((event: any) => {
if (event instanceof RoutesRecognized) {
console.log(event.url);
}
});
console.log(this._ar.pathFromRoot.toString());
console.log(this._ar.routeConfig.path.toString());
console.log(this._ar.snapshot.url);
this._ar.url.subscribe((urlsegment: UrlSegment[]) => {
console.log(urlsegment);
})
}
}
我有什么遗漏的吗？我在这里看到了这个问题：Angular router url returns slash
我的路由配置：
const APPMainRoutes: Routes = [
{ path: '', redirectTo: '/login', pathMatch: 'full' },
{ path: 'teams', component: CollaborateComponent },
{ path: 'login', component: LoginComponent },
];
我的ng版本：
Angular CLI: 6.1.4
Node: 10.7.0
OS: linux x64
Angular: 6.1.4
... animations, cli, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router
Package Version
@angular-devkit/architect 0.7.4
@angular-devkit/build-angular 0.7.4
@angular-devkit/build-optimizer 0.7.4
@angular-devkit/build-webpack 0.7.4
@angular-devkit/core 0.7.4
@angular-devkit/schematics 0.7.4
@angular/cdk 6.4.6
@angular/material 6.4.6
@ngtools/webpack 6.1.4
@schematics/angular 0.7.4
@schematics/update 0.7.4
rxjs 6.2.2
typescript 2.7.2
webpack 4.9.2
在这个问题中，我试图在主机/父/并行组件中访问URL或路径。所有上述失败都允许在路由组件内部捕获正确的路径，但不能在父/主机/并行组件中捕获。只有Router.events可以在那里工作。令人惊讶的是，我也无法在父/主机中捕获和使用ActivatedRoute.url.subscribe。
这个问题的原因是在主机/父/并行组件中无法访问URL或路径。解决方法是使用Router.events来捕获URL。以下是如何在主机/父/并行树中使用Router和ActivatedRoute的示例代码：
// 在构造函数中注入
constructor(private _router: Router) {
// 在Init或Constructor等任何地方调用以下代码
this._router.events.subscribe((event: any) => {
if (event instanceof RoutesRecognized) {
console.log(event.url); // 可以工作
}
// NavigationStart // NavigationEnd // NavigationCancel // NavigationError // RoutesRecognized
});
}
非常感谢！这帮助我在初始化时获取用户在浏览器中输入的URL（我试图在实际渲染之前获得用户想要访问的“着陆页”）。
问题原因：出现该问题的原因是无法从Angular路由器获取路径或URL。
解决方法：可以通过检查事件对象的类型来判断是否是NavigationStart和NavigationEnd事件。下面是一个示例：
在app.component.ts文件中，导入所需的模块和类，并在AppComponent类中添加一个ngOnInit方法。在ngOnInit方法中，通过订阅路由器的事件来获取路径和URL。
import { Component, OnInit } from '@angular/core';
import { Router, NavigationStart, NavigationEnd } from '@angular/router';
export class AppComponent implements OnInit {
constructor(private router: Router) { }
ngOnInit() {
this.router.events.subscribe((event: any) => {
if(event instanceof NavigationStart) {
console.log('start => ', event.url);
}
if(event instanceof NavigationEnd) {
console.log('end => ', event.url);
}
});
}
}
可以通过以下链接查看一个示例：[Stackblitz demo](https://stackblitz.com/edit/angular-abgvcf?file=src/app/app.component.ts)
