父組件從ActivatedRoute獲取空Params

Question

我有一個主要組件，它有一個路由器插座。在是在路由器出口裝的分量我搶的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對象？

編輯：

的要求充分父組件爲app.module.ts

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]', 'g'), '/'); 
     alert(params['url']); 
     } 
    }); 
    } 

} 

路由器的代碼：

RouterModule.forChild([ 
{ path: 'report', component: MobileReportComponent } 

：用於嵌套模塊

RouterModule.forRoot([ 
    { path: '', component: CheckMobileComponent }, 
    { path: '**', component: CheckMobileComponent } 
]), 

路由器的代碼

那裏沒有直接指定我的app.component的路由，因爲它是由index.html中的選擇器加載的。

Answer 1

ActivatedRoute：包含有關與在路由器出口加載的組件相關聯的路線的信息。如果您想訪問外部的路線詳情，請使用下面的代碼。

import { Component } from '@angular/core'; 
import { Router, ActivatedRoute, 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。

Answer 2

ActivatedRoute適用於通過router-outlet加載的組件。 From docs - 它：

包含有關與在插座中加載的組件相關的路由的信息。

我不認爲你可以在未裝入插座的組件中使用它。它也不適用於你的組件擴展的基類。

class A { constructor(public route: ActivatedRoute) } 
class B extends A { ngOnInit() { this.route; } }  // not working 
class C { constructor(public route: ActivatedRoute) } // working if loaded in outlet 

Answer 3

非常簡單的答案

import { Component } from '@angular/core'; 
    import { Router, ActivatedRoute, Params, RoutesRecognized } from 
    '@angular/router'; 

    export class AppComponent { 

    constructor(private actRoute: ActivatedRoute, private router: 
       Router){} 

    ngOnInit(): void { 
    this.actRoute.firstChild.params.subscribe(
     (params: any) => { 
     if (params.hasOwnProperty('<whatever the param name>') != '') { 
      //do whatever you want 
      } 
     } 
    }); 

    } 
}