Родительские компоненты становятся пустыми. Params from ActivatedRoute

У меня есть основной компонент, который имеет в нем роутер-выход. В компоненте, который загружен в маршрутизатор-выход, я беру параметр 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 всегда пуст. Я не понимаю, почему, поскольку объект params вложенных компонентов имеет данные в нем, и я пытаюсь получить к нему доступ точно так же. Ошибок нет, объект param просто пуст.

Почему мой родительский компонент не получает правильный объект Params из ActivatedRoute?

изменить:

в качестве запрошенного полного родительского компонента

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

}

код маршрутизатора для app.module.ts:

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

код маршрутизатора для вложенного модуля:

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

Нет прямого маршрута для моего app.component, поскольку он загружается селектором в index.html.

Ответ 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);

            }
        });

    }
}

Существуют другие способы обмена данными между компонентами, например используя службу.

Подробнее о том, как вы можете решить эту концепцию, читать комментарии здесь.

Ответ 2

Очень простой ответ

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

   }
}

Ответ 3

ActivatedRoute работает для компонентов, загруженных через router-outlet. Из документов - это:

Содержит информацию о маршруте, связанном с компонентом, загруженным в розетку.

Я не думаю, что вы можете использовать его в компонентах, которые не загружаются в розетку. Он также не работает в базовых классах, которые расширяет ваш компонент.

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

Ответ 4

У меня была очень похожая проблема с этим главным образом из-за моего неправильного понимания того, как на самом деле работали маршруты. Я думал, что могу просто пройтись по цепочке параметров пути, и каждый из них будет родителем/потомком. Однако, если у маршрута есть более одного элемента в пути (например, /dashboard и profile/:user_id), это будет зависеть от того, как вы настроили маршруты в своих profile/:user_id маршрутизации.

Чтобы объяснить другой способ, который заставил это щелкнуть для меня:

// If I am trying to access ActivatedRoute from the CheckMobileComponent (say 
// through a 'router-outlet'), I could get it through something like 
// 'this._route.firstChild'

{ path: '', component: CheckMobileComponent, children: [

    // If I want to get things from the '' context in MobileReportComponent, it 
    // would be through something like 'this._route.parent'

    { path: 'report', component: MobileReportComponent }

  ]   

}