Question

我正在尝试从我的角度应用程序的AppComponent中的url获取参数。

但是当我使用ActivatedRoute获取参数时，它给出了null。这是我的路由器配置。

  {
    path: '',
    component: HomeComponent,
    canActivate: [AuthGuard]
  },
  {
    path: 'product/:product',
    component: HomeComponent,
    canActivate: [AuthGuard]
  }

这是我在AppComponent中尝试从url获取参数结果的方法。

constructor(
      private route: ActivatedRoute,
      private router: Router
) {}

ngOnInit() {

this.route.params.subscribe(params => {
      console.log(params['product']); //jsut print the result in console
});

//or can use to get the result
//console.log(this.route.snapshot.params['product'];

}

此代码仅在特定组件内有效。那么，有什么合适的方法来获得结果。 [Angular 6 +]

Answer 1

首先，创建一个sharedService

import { Injectable } from '@angular/core';
import {  Subject  } from 'rxjs';


@Injectable()
export class SharedService {

  myData: Subject<any> = new Subject<any>();

  constructor() {}

  setData(data) {
    this.myData.next(data);
  }
}

然后从要设置数据的位置使用此方法：

export class MyComponent implements OnInit {

    constructor(private sharedService: SharedService) { }

    ngOnInit() {
       this.sharedService.setData(data);
    }
}

然后在您的appComponent中：

export class AppComponent implements OnInit {

  constructor(private sharedService: SharedService) {
    this.sharedService.myData.subscribe((value) => {
     console.log(value) // Here you will get your complete data
    });
  }

}

Answer 2

立即了解。问题是因为AppComponent始终存在，并且其参数未更新。如果您在activatedRoute中订阅HomeComponent，则可以获得更新后的值。如果要求在AppComponent中获取值，则可以通过订阅AppCOmponent并从HomeComponent更新值来遵循@Chirag的回答。查看分叉的代码here

如何使用Angular中的Router或ActivatedRoute从URL获取参数

2 个答案: