问题描述
将用户上一页的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(dashboard.component.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 (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();
}
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;
});
}
}
这篇关于需要帮助从Angular 2中的Service访问变量的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!