我有一个主要组件,其中有一个路由器插座.在路由器插座中加载的组件中,我抓住url参数,如下所示:
- ngOnInit(): void {
- // _route is injected ActivatedRoute
- this._route.params.subscribe((params: Params) => {
- if(params['url']){
- this.testUrl = params['url'].replace(new RegExp('\%2[fF]','g'),'/');
- }
- });
- }
这工作正常,但是当我在我的顶级组件上尝试它时,params对象总是空的.我不明白为什么因为嵌套组件param对象中有数据,我试图以完全相同的方式访问它.没有错误,param对象只是空的.
为什么我的父组件没有从ActivatedRoute获取正确的Params对象?
编辑:
按要求的完整父组件
- import { OnInit,Component,Directive } from '@angular/core';
- import { Router,ActivatedRoute,Params } from '@angular/router';
- import { Observable } from 'rxjs/Observable';
- @Component({
- selector: 'app-root',templateUrl: 'app.component.html',})
- export class AppComponent {
- public testUrl: string;
- constructor(private router: Router,private _route: ActivatedRoute) {
- }
- ngOnInit(): void{
- this._route.queryParams.subscribe((params: Params) => {
- console.log(params);
- if (params['url']) {
- this.testUrl = params['url'].replace(new RegExp('\%2[fF]','/');
- alert(params['url']);
- }
- });
- }
- }
app.module.ts的路由器代码:
- RouterModule.forRoot([
- { path: '',component: CheckMobileComponent },{ path: '**',component: CheckMobileComponent }
- ]),
嵌套模块的路由器代码:
- RouterModule.forChild([
- { path: 'report',component: MobileReportComponent }
我的app.component没有直接指定的路由,因为它由index.html中的选择器加载.
ActivatedRoute:包含与路由器插座中加载的组件关联的路由的信息.如果您想访问其外的路线详情,请使用以下代码.
- import { Component } from '@angular/core';
- import { Router,Params,RoutesRecognized } from '@angular/router';
- export class AppComponent {
- constructor(private route: ActivatedRoute,private router: Router) {
- }
- ngOnInit(): void {
- this.router.events.subscribe(val => {
- if (val instanceof RoutesRecognized) {
- console.log(val.state.root.firstChild.params);
- }
- });
- }
- }
还有其他方法可以在组件之间共享数据,例如by using a service.
有关如何解决这个概念的更多细节,请参见read comments here.