親コンポーネントが空になるActivatedRouteのパラメータ

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.forRoot([ 
    { path: '', component: CheckMobileComponent }, 
    { path: '**', component: CheckMobileComponent } 
]), 

ネストされたモジュールのルータコード：

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

そこindex.htmlのセレクタによってロードされるため、app.componentの直接指定されたルートはありません。

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 - it：

コンセントにロードされたコンポーネントに関連付けられたルートに関する情報が含まれています。

コンセントに取り付けられていないコンポーネントでは使用できないと思います。また、コンポーネントが拡張する基本クラスでは機能しません。

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 
      } 
     } 
    }); 

    } 
}