我有一個帶有自定義庫()的應用程序,其中包含許多要與應用程序中的其他項目共享的組件(讓我們調用其中一個)。toolsdata-portal對于某些上下文,在app.component中.html我有:data-portal<div> ... <lib-primeng-menu-nav></lib-primeng-menu-nav> <router-outlet></router-outlet> ...</div>其中,庫中的 包含項目的導航,并且可以顯示幾個不同的視圖,其中一個視圖顯示許多帶有時間序列數據的圖表(也來自庫):lib-primeng-menu-navtoolsrouter-outlettools當用戶單擊圖表左下角的星形圖標時,它應該將該序列從包含在“分析器”視圖中切換,在該視圖中,可以在單個圖表上繪制多個序列以進行比較。我有一個分析器服務,用于跟蹤應在分析器中顯示的系列。tools返回到導航欄,指向分析器的鏈接還應顯示已選擇多少個系列的計數器:<nav id="sidebar-nav" class="navbar navbar-fixed-top navbar-light"> ... <a routerLink="/analyzer"> Analyzer ({{analyzerSeries}})</a> ...</nav>這是我的問題:我無法讓計數器進行更改。在初始加載時,鏈接按預期方式顯示,但每當我單擊要添加的系列之一時,計數器仍保持在 0。如果我導航到“分析器”視圖,則顯示正確顯示圖表中的正確序列,但導航欄仍顯示在計數器中。與分析器視圖和服務相關的所有其他行為似乎工作正常。Analyzer (0)(0)以下是我到目前為止嘗試過的方法:方法 1analyzer.service.ts:@Injectable({ providedIn: 'root'})export class AnalyzerService { // Keep track of series in the analyzer public analyzerSeries = []; public analyzerData = { analyzerTableDates: [], analyzerSeries: [], };primeng-menu-nav.component.ts constructor( private _analyzerService: AnalyzerService, private route: ActivatedRoute, private _router: Router ) { }ngOnInit() { ... this.analyzerSeries = this._analyzerService.analyzerSeries.length; ... }primeng-menu-nav.component.html<nav id="sidebar-nav" class="navbar navbar-fixed-top navbar-light"> ... <a routerLink="/analyzer"> Analyzer ({{analyzerSeries}})</a> ...</nav>方法 2analyzer.service.ts public analyzerSeries = []; private analyzerSeriesTest = new BehaviorSubject(null); analyzerSeries$ = this.analyzerSeriesTest.asObservable(); ... updateAnalyzer(seriesId) { ... this.analyzerSeriesTest.next(this.analyzerSeries.length); ... }primeng-menu-nav.component.tsconstructor( public _analyzerService: AnalyzerService, private route: ActivatedRoute, private _router: Router ) { this.analyzerSeriesCount = this._analyzerService.analyzerSeries$.subscribe((data: any) => { this.analyzerSeries = data; });
在 Angular 9 中的組件之間共享數據
慕田峪4524236
2022-08-04 16:07:42