父组件从ActivatedRoute获取空参数 [英] Parent components gets empty Params from ActivatedRoute

问题描述

我有一个主要组件，其中有一个路由器插座.在路由器出口中加载的组件中，我抓住了url参数，如下所示:

I have a main component that has a router-outlet in it. In the component that is loaded in the router-outlet I grab the url parameter like this:

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对象只是空的.

This works fine, but when I try it on my top level component the params object is always empty. I don't understand why as the nested components param object has the data in it and I am trying to access it exactly the same way. There are no errors to go on, the param object is just empty.

为什么我的父组件无法从ActivatedRoute获得正确的Params对象?

Why doesn't my parent component get the right Params object from 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的路由器代码:

router code for app.module.ts:

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

嵌套模块的路由器代码:

router code for nested module:

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

我的app.component没有直接指定的路由，因为它是由index.html中的选择器加载的.

There is no directly specified route for my app.component as it is loaded by a selector in index.html.

推荐答案

ActivatedRoute:包含有关与路由器出口中加载的组件相关联的路由的信息.如果您想访问其外部的路线详细信息，请使用以下代码.

ActivatedRoute: Contains the information about a route associated with a component loaded in an router outlet. If you would like to access route details outside of it, use the code below.

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

            }
        });

    }
}

还有其他方法可以在组件之间共享数据，例如通过使用服务.

There are other ways to share data in between components for example by using a service.

有关如何解决这一概念的更多详细信息，请在此处阅读评论.

For more details about how you can tackle this as concept, read comments here.

这篇关于父组件从ActivatedRoute获取空参数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！