Родительские компоненты становятся пустыми. 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 }
]
}
