[英]Need help accessing variable from Service in Angular 2
将用户最后一页的URL ID传递给我可以在对话框中引用的服务。
issuer.service.ts
import { Injectable, EventEmitter } from '@angular/core'; import { Observable, of } from 'rxjs'; import { BehaviorSubject } from 'rxjs'; @Injectable() export class IssuerService { private urlidSource = new BehaviorSubject<string>(''); currentUrlid = this.urlidSource.asObservable(); public onChange: EventEmitter<string> = new EventEmitter<string>(); constructor () { } changeUrlid(urlid: string) { this.currentUrlid = of(urlid); this.onChange.emit(urlid); } getUrlid(currentUrlid: string) { return this.currentUrlid; } }
具有我想要的URL ID的页面(dashboard.component.ts)
import { IssuerService } from './../../issuer.service'; import { ActivatedRoute } from '@angular/router'; import { Router } from '@angular/router'; urlid: string; constructor( private route: ActivatedRoute, private router: Router, private issuerService: IssuerService, public dialog: MatDialog ) {} newUrlid() { this.issuerService.changeUrlid(this.route.snapshot.paramMap.get('id')); console.log(this.urlid); } ngOnInit() { // Get URL ID this.issuerService.onChange.subscribe(urlid => this.urlid = urlid); this.newUrlid(); }
我想在以下组件中读取值的组件:
import { ActivatedRoute } from '@angular/router'; import { Router } from '@angular/router'; import { IssuerService } from './../../issuer.service'; urlid: string; constructor( private route: ActivatedRoute, private router: Router, private issuerService: IssuerService, public dialog: MatDialog ) {} ngOnInit() { this.issuerService.onChange.subscribe(urlid => { this.urlid = urlid; console.log(this.urlid); }); }
因此,当前访问仪表盘页面时,它将显示正确的2值。 我的目标是当用户访问任何页面时,我都可以读取此值2。如何访问此值? 上面的代码有效,我的标题显示2,但仅在仪表板页面上显示。 无论用户在哪个页面上,我都需要显示2。
您不需要为get方法使用参数,因为您已经在服务中拥有了值,
getUrlid() {
return this.currentUrlid;
}
您可以按以下方式使用检索第二个组件中的值,
this.issuerService.currentUrlid.subscribe((value: string) => {
this.urlid = value;
}
您可以看到此示例 ,它是修改后的列表:
使用queryPamas获取查询字符串,而不是参数(DashboardComponent)
使用ReplaySubject(1)返回最后一个urlId; 它没有默认值,只需返回上一个值(IssuerService)
export class IssuerService { private urlidSource = new ReplaySubject<string>(1); constructor() { } changeUrlid(urlid: string) { this.urlidSource.next(urlid); } getUrlid() { return this.urlidSource; } } export class DashboardComponent implements OnInit { urlid: string; constructor( // private route: ActivatedRoute, private router: Router, private issuerService: IssuerService, // public dialog: MatDialog ) { } newUrlid() { // Get URL ID this.route.queryParams.subscribe((queryParam) => { const id = queryParam['id']; if (!id) { return; } this.issuerService.changeUrlid(id); }); } ngOnInit() { this.newUrlid(); this.issuerService.getUrlid().subscribe(urlid => { this.urlid = urlid; }); } } export class HelloComponent implements OnInit { urlid; constructor( private issuerService: IssuerService ) { } ngOnInit() { this.issuerService.getUrlid().subscribe(urlid => { this.urlid = urlid; }); } }
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.