angular – 父组件从ActivatedRoute获取空参数

前端之家收集整理的这篇文章主要介绍了angular – 父组件从ActivatedRoute获取空参数前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个主要组件,其中有一个路由器插座.在路由器插座中加载的组件中,我抓住url参数,如下所示:
  1. ngOnInit(): void {
  2. // _route is injected ActivatedRoute
  3. this._route.params.subscribe((params: Params) => {
  4. if(params['url']){
  5. this.testUrl = params['url'].replace(new RegExp('\%2[fF]','g'),'/');
  6.  
  7. }
  8.  
  9. });
  10. }

这工作正常,但是当我在我的顶级组件上尝试它时,params对象总是空的.我不明白为什么因为嵌套组件param对象中有数据,我试图以完全相同的方式访问它.没有错误,param对象只是空的.

为什么我的父组件没有从ActivatedRoute获取正确的Params对象?

编辑:

按要求的完整父组件

  1. import { OnInit,Component,Directive } from '@angular/core';
  2. import { Router,ActivatedRoute,Params } from '@angular/router';
  3. import { Observable } from 'rxjs/Observable';
  4.  
  5. @Component({
  6. selector: 'app-root',templateUrl: 'app.component.html',})
  7. export class AppComponent {
  8. public testUrl: string;
  9. constructor(private router: Router,private _route: ActivatedRoute) {
  10.  
  11. }
  12. ngOnInit(): void{
  13. this._route.queryParams.subscribe((params: Params) => {
  14. console.log(params);
  15.  
  16. if (params['url']) {
  17. this.testUrl = params['url'].replace(new RegExp('\%2[fF]','/');
  18. alert(params['url']);
  19. }
  20. });
  21. }
  22.  
  23. }

app.module.ts的路由器代码

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

嵌套模块的路由器代码

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

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

ActivatedRoute:包含与路由器插座中加载的组件关联的路由的信息.如果您想访问其外的路线详情,请使用以下代码.
  1. import { Component } from '@angular/core';
  2. import { Router,Params,RoutesRecognized } from '@angular/router';
  3.  
  4. export class AppComponent {
  5.  
  6. constructor(private route: ActivatedRoute,private router: Router) {
  7.  
  8. }
  9.  
  10. ngOnInit(): void {
  11. this.router.events.subscribe(val => {
  12.  
  13. if (val instanceof RoutesRecognized) {
  14.  
  15. console.log(val.state.root.firstChild.params);
  16.  
  17. }
  18. });
  19.  
  20. }
  21. }

还有其他方法可以在组件之间共享数据,例如by using a service.

有关如何解决这个概念的更多细节,请参见read comments here.

猜你在找的Angularjs相关文章