Elternkomponenten werden leer Params from ActivatedRoute

Question

Ich habe eine Hauptkomponente, die einen Router-Ausgang enthält. In der Komponente, die in dem Router-Steckdose geladen wird packe ich den URL-Parameter wie folgt aus:

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'), '/'); 

     } 

    }); 
} 

Dies funktioniert gut, aber wenn ich es auf meinem Top-Level-Komponente versuchen die params Objekt ist immer leer. Ich verstehe nicht, warum das verschachtelte Param-Objekt der Komponenten die Daten enthält und ich versuche genau darauf zuzugreifen. Es gibt keine Fehler, das Param-Objekt ist leer.

Warum erhält meine Elternkomponente nicht das richtige Params-Objekt von ActivatedRoute?

edit:

wie gewünscht volle Elternkomponente

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

} 

Router-Code für app.module.ts:

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

Router Code für verschachtelten Modul:

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

Dort ist keine direkt angegebene Route für meine app.component, da sie von einem Selektor in index.html geladen wird.

Answer 1

ActivatedRoute: Enthält die Informationen über eine Route mit einer Komponente in einem Router geladen Auslass verbunden. Wenn Sie auf Routeninformationen außerhalb davon zugreifen möchten, verwenden Sie den folgenden Code.

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

      } 
     }); 

    } 
} 

Es gibt andere Möglichkeiten by using a service Daten zwischen Komponenten zum Beispiel zu teilen.

Für weitere Details, wie Sie dies als Konzept angehen können, read comments here.

Answer 2

ActivatedRoute funktioniert für Komponenten geladen über router-outlet. From docs - it:

Enthält die Informationen über eine Route mit einer Komponente in einem Auslass geladen verbunden.

Ich glaube nicht, dass Sie es in Komponenten verwenden können, die nicht in einer Steckdose geladen sind. Es funktioniert auch nicht in Basisklassen, die Ihre Komponente erweitert.

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

Die sehr einfache Antwort

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

    } 
}