Javascript 无法从路由器获取路径或url
我无法从ActivatedRoute或路由器导入获取URL或路径。它为路径“”输出空白,为URL输出“/”。我记得使用了一个工作版本。唯一能够捕获正确路由的东西是Router.events。我也无法订阅ActivatedRoute中的URL。这是密码Javascript 无法从路由器获取路径或url,javascript,angular,url,path,angular-router,Javascript,Angular,Url,Path,Angular Router,我无法从ActivatedRoute或路由器导入获取URL或路径。它为路径“”输出空白,为URL输出“/”。我记得使用了一个工作版本。唯一能够捕获正确路由的东西是Router.events。我也无法订阅ActivatedRoute中的URL。这是密码 import { Component, OnInit, ViewChild, ElementRef } from '@angular/core'; import { Router, ActivatedRoute, UrlSegment, Navig
import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
import { Router, ActivatedRoute, UrlSegment, NavigationStart, 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) {
this._r.events.subscribe((event: any) => {
if (event instanceof RoutesRecognized) {
// '/teams' output with route http://localhost:4200/teams
console.log(event.url);
}
// NavigationStart // NavigationEnd // NavigationCancel // NavigationError // RoutesRecognized
});
}
ngOnInit() {
console.log(this._ar.pathFromRoot.toString()); // Blank output with route http://localhost:4200/teams
console.log(this._ar.routeConfig.path.toString()); // Blank output with route http://localhost:4200/teams
console.log(this._ar.snapshot.url); // Blank output with route http://localhost:4200/teams
this._ar.url.subscribe((urlsegment: UrlSegment[]) =>{
console.log(urlsegment) // Unable to subscribe with route change to /teams
})
}
}
我有什么遗漏吗?我见过这个
我的路线:
const APPMainRoutes: Routes = [
{path: '', redirectTo: '/login', pathMatch: 'full'},
{path: 'teams', component: CollaborateComponent},
{path: 'login', component: LoginComponent},
];
我的ng版本:
角度CLI:6.1.4
节点:10.7.0
操作系统:linux x64
角度:6.1.4
... 动画、cli、通用、编译器、编译器cli、核心、表单
... http、语言服务、平台浏览器
... 平台浏览器、动态路由器
软件包版本
@角度devkit/architect 0.7.4
@角度开发套件/构建角度0.7.4
@角度开发工具包/构建优化器0.7.4
@角度开发套件/构建网页包0.7.4
@角度devkit/核心0.7.4
@角度devkit/示意图0.7.4
@角度/cdk 6.4.6
@角度/材料6.4.6
@ngtools/webpack 6.1.4
@示意图/角度0.7.4
@示意图/更新0.7.4
rxjs 6.2.2
打字稿2.7.2
webpack 4.9.2您可以获得如下url信息:
ngOnInit() {
console.log(this._r.url);
}
如果需要在url中获取查询参数
你可以得到:
this._r.snapshot.queryParamMap
您可以检查导航开始和导航结束 这是一个例子 在
app.component.ts中
import { Component, OnInit } from '@angular/core';
import { Router, NavigationStart, NavigationEnd } from '@angular/router';
export class AppComponent {
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);
}
});
}
}
demo我试图访问url的组件或路径是组件树的主机/父级/并行组件。所有上述故障都允许捕获路由组件内部的正确路径
,但不允许捕获父/主机/并行树组件。只有路由器事件在那里工作。令人惊讶的是,我无法在父/主机中捕获并使ActivatedRoute.url.subscribe工作
<app-cmp>
Router and ActivatedRoute does not Work here. Only Router.events Work here
<router-outlet>
<team-cmp>Router and ActivatedRoute Works here</team-cmp>
</router-outlet>
<sidebar-cmp>
Router and ActivatedRoute does not Work here. Only Router.events Work here
<sidebar-cmp>
</app-cmp>
如果所有其他操作都失败,您可以使用全局的location.pathname
,抱歉,这两种方法都不起作用。获取一个“/”和一个映射是empty@Gary请检查路由模块中的url设置。如果访问,则必须返回/测试此.url。@DashboardComponent的url是什么?捕捉良好-它位于侧边栏。并且是路由器出口的父dom。路由组件可以捕获url。@Gary检查是否需要获取url/login/team,然后应定义LoginComponent或TeamComponent。如果您想在父组件中获取url链接,您必须使用另一种方式…正如我所看到的,您没有在路由中使用DashboardComponent。并从“redirectTo:'/login'”中删除斜杠,它没有帮助。这可能也没什么帮助。我的问题是/teams
路线没有被捕获为/
或路径被捕获为“
如果只使用/login
我会担心,它似乎只适用于使用构造函数的事件捕获-如果您注意到这个演示的话。。在这里,我可以使用RouterNiket获取url,在本演示的app.component中检查结果。太多了!它帮助我在init上的boostrapp组件上获取用户在浏览器中键入的URL(我试图在实际呈现任何内容之前获取用户想要访问的“登录页”)
// inject in constructor
constructor( private _router: Router) {
// Call below anywhere within Init or Constructor etc
this._router.events.subscribe((event: any) => {
if (event instanceof RoutesRecognized) {
console.log(event.url); // WORKS
}
// NavigationStart // NavigationEnd // NavigationCancel // NavigationError // RoutesRecognized
});
}