我正在尝试从我的角度应用程序的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 +]
答案 0 :(得分:0)
首先,创建一个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
});
}
}
答案 1 :(得分:0)
立即了解。问题是因为AppComponent
始终存在,并且其参数未更新。如果您在activatedRoute
中订阅HomeComponent
,则可以获得更新后的值。如果要求在AppComponent
中获取值,则可以通过订阅AppCOmponent并从HomeComponent更新值来遵循@Chirag的回答。
查看分叉的代码here