需要帮助从Angular 2中的Service访问变量

本文介绍了需要帮助从Angular 2中的Service访问变量的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

将用户上一页的URL ID传递给我可以在对话框中引用的服务.

issuer.service.ts

import从'@ angular/core'导入{Injectable，EventEmitter};从'rxjs'导入{可观察的，}从'rxjs'导入{BehaviorSubject};@Injectable()导出类IssuerService {私人urlidSource = new BehaviorSubject< string>('');currentUrlid = this.urlidSource.asObservable();public onChange:EventEmitter< string>=新的EventEmitter< string>();构造函数(){}changeUrlid(urlid:string){this.currentUrlid = of(urlid);this.onChange.emit(urlid);}getUrlid(currentUrlid:string){返回this.currentUrlid;}}

具有我想要的URL ID(dashboardponent.ts)的页面

从'./../../issuer.service'导入{IssuerService};从"@ angular/router"导入{ActivatedRoute}；从"@ angular/router"导入{Router}；urlid:字符串;构造函数(专用路由:ActivatedRoute，专用路由器:路由器，私人issuerService:IssuerService，公共对话框:MatDialog){}newUrlid(){this.issuerService.changeUrlid(this.route.snapshot.paramMap.get('id'));console.log(this.urlid);}ngOnInit(){//获取URL IDthis.issuerService.onChange.subscribe(urlid => this.urlid = urlid);this.newUrlid();}

组件我要读取以下值:

从'@ angular/router'导入{ActivatedRoute};从"@ angular/router"导入{Router}；从'./../../issuer.service'导入{IssuerService};urlid:字符串;构造函数(专用路由:ActivatedRoute，专用路由器:路由器，私人issuerService:IssuerService，公共对话框:MatDialog){}ngOnInit(){this.issuerService.onChange.subscribe(urlid => {this.urlid =网址id;console.log(this.urlid);});}

因此，当我当前访问仪表板页面时，它将显示正确的2值.我的目标是，当用户访问任何页面时，我都可以读取此值2.如何访问此值?上面的代码有效，并且我的标题显示2，但仅在仪表板页面上显示.无论用户在哪个页面上，我都需要显示2.

解决方案

，您可以看到此

导出类IssuerService {私人urlidSource = new ReplaySubject< string>(1);Constructor(){}changeUrlid(urlid:string){this.urlidSource.next(urlid);}getUrlid(){返回this.urlidSource;}}导出类DashboardComponent实现OnInit {urlid:字符串;构造函数(//专用路由:ActivatedRoute，专用路由器:路由器，私人issuerService:IssuerService，//公共对话框:MatDialog){}newUrlid(){//获取URL IDthis.route.queryParams.subscribe((queryParam)=> {const id = queryParam ['id'];如果(！id){返回;}this.issuerService.changeUrlid(id);});}ngOnInit(){this.newUrlid();this.issuerService.getUrlid().subscribe(urlid => {this.urlid =网址id;});}}导出类HelloComponent实现OnInit {urlid;构造函数(私人issuerService:IssuerService){}ngOnInit(){this.issuerService.getUrlid().subscribe(urlid => {this.urlid =网址id;});}}

Passing the URL id from the last page a user was on to a service that I can reference in a dialog.

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

Page that has the URL id I want (dashboardponent.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(); }

Component I want to read the value in:

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

So currently when I visit my dashboard page it will display the value of 2 which is correct. My goal is that when a user visits any page I can read this value of 2. How can I access this value? The above code works and my Header displays 2 but only when on the dashboard page. I need it to display 2 no matter what page the user is on.

解决方案

you can see this example, and It's modified list:

• use queryPamas to get query string, not params (DashboardComponent)

• use ReplaySubject(1) to return the last urlId; it's don't have a default value, just return prev one value (IssuerService)

• get observable from getUrlid and subscribe it in components that want to show url id

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