Angular 2+下拉框切换读取值并加载JSON数据求助

Hey there, let's work through this issue together—you're already close, we just need to adjust a few parts of your setup to get that dropdown-driven data loading working smoothly.

现有代码的核心问题 #

• 你的AppConfig服务没有提供数据更新通知机制，组件没法知道下拉框切换后新的JSON数据已经加载完成
• APP_INITIALIZER里硬编码了初始加载的JSON文件名，没有使用metadata.json的第一个值
• 组件（Dashboard/Programmer）只在初始化时读取一次数据，没有监听后续的数据变化
• 组件之间没有通过服务共享下拉选择的状态和数据更新事件

步骤1：改造AppConfig服务 #

我们需要添加一个RxJS Subject来发布数据更新事件，同时优化加载逻辑，让它能响应下拉框的选择变化：

import { Injectable } from '@angular/core';
import { Http } from "@angular/http";
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/switchMap';
import 'rxjs/add/operator/do';
import 'rxjs/add/operator/first';
import { Observable } from 'rxjs/Observable';
import { Subject } from 'rxjs/Subject';

@Injectable()
export class AppConfig {
  config: any;
  user: any;
  objects: any;
  fileName: any;
  // 用于通知组件数据更新的Subject
  private dataUpdatedSource = new Subject<any>();
  dataUpdated$ = this.dataUpdatedSource.asObservable();

  constructor(private http: Http) {
    console.log('ConfigService called.')
  }

  // 加载指定的项目JSON文件，并通知组件
  load(projectName: string): Observable<any> {
    return this.http.get('./assets/host_configuration.json')
      .map(res => res.json())
      .switchMap(config => {
        this.config = config;
        return this.http.get('./assets/json/' + projectName);
      })
      .map(res => res.json())
      .do((response) => {
        this.objects = response;
        // 通知所有订阅的组件数据已更新
        this.dataUpdatedSource.next(response);
      })
      .catch(error => {
        console.error('Error loading project data:', error);
        return Observable.of(null);
      });
  }

  loadMetadata(): Observable<any> {
    return this.http.get('./assets/metadata.json')
      .map(res => res.json())
      .do(fileName => {
        console.log('metadata loaded');
        this.fileName = fileName;
      })
      .catch(error => {
        console.error('Error loading metadata:', error);
        return Observable.of([]);
      });
  }
}

步骤2：更新AppModule的初始化逻辑 #

现在我们要先加载metadata，再用metadata的第一个值初始化加载项目数据：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, APP_INITIALIZER } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router';
import { HttpClientModule } from '@angular/common/http';
import { HttpModule, JsonpModule } from '@angular/http';
import { AppRoutes } from './app.routing';
import { AppConfig } from './app.config';
import { AppComponent } from './app.component';
import { NavigationComponent } from './navigation/navigation.component';
import { SharedModule } from './shared/shared.module';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { BreadcrumbsComponent } from './navigation/breadcrumbs/breadcrumbs.component';
import { TitleComponent } from './navigation/title/title.component';
import { Observable } from 'rxjs/Observable';

// 初始化工厂函数：先加载metadata，再加载第一个项目数据
export function initializeApp(config: AppConfig) {
  return () => config.loadMetadata()
    .first()
    .switchMap(metadata => {
      if (metadata.length > 0) {
        return config.load(metadata[0].value);
      }
      return Observable.of(null);
    })
    .toPromise();
}

@NgModule({
  declarations: [
    AppComponent,
    NavigationComponent,
    BreadcrumbsComponent,
    TitleComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    RouterModule.forRoot(AppRoutes),
    SharedModule,
    HttpClientModule,
    HttpModule,
    JsonpModule,
    FormsModule
  ],
  providers: [
    AppConfig,
    {
      provide: APP_INITIALIZER,
      useFactory: initializeApp,
      deps: [AppConfig],
      multi: true
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

步骤3：改造NavigationComponent实现下拉框切换 #

让这个组件获取metadata选项，绑定下拉框，并在选择变化时触发数据加载：

import { Component, OnInit } from '@angular/core';
import { AppConfig } from '../app.config';

@Component({
  selector: 'app-navigation',
  templateUrl: './navigation.component.html',
  styleUrls: ['./navigation.component.css']
})
export class NavigationComponent implements OnInit {
  projectOptions: any[] = [];
  selectedProject: string;

  constructor(private appConfig: AppConfig) { }

  ngOnInit() {
    // 获取metadata里的项目选项
    if (this.appConfig.fileName) {
      this.projectOptions = this.appConfig.fileName;
      // 默认选中第一个选项
      this.selectedProject = this.projectOptions[0].value;
    }
  }

  // 下拉框选择变化时触发
  onProjectChange() {
    if (this.selectedProject) {
      this.appConfig.load(this.selectedProject).subscribe();
    }
  }
}

对应的navigation.component.html部分：

<select [(ngModel)]="selectedProject" (change)="onProjectChange()">
  <option *ngFor="let project of projectOptions" [value]="project.value">
    {{ project.name }}
  </option>
</select>

步骤4：更新DashboardComponent监听数据更新 #

让组件订阅AppConfig的dataUpdated$事件，自动更新UI：

import { Component, OnInit, OnDestroy } from '@angular/core';
import { Chart } from 'chart.js';
import { AppConfig } from '../../app.config';
import { Subscription } from 'rxjs/Subscription';

declare var Chart;

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: [ './dashboard.component.css' ]
})
export class DashboardComponent implements OnInit, OnDestroy {
  objects: any;
  private dataSubscription: Subscription;

  constructor(public appConfig: AppConfig) { }

  ngOnInit() {
    // 初始化时获取现有数据
    this.objects = this.appConfig.objects;
    // 订阅数据更新事件
    this.dataSubscription = this.appConfig.dataUpdated$.subscribe(newData => {
      this.objects = newData;
      this.updates(); // 数据更新后重新渲染UI
    });
    this.updates();
  }

  updates() {
    if (!this.objects) return;
    const JsonData = this.objects.Information.data;
    console.log(JsonData[0][0] + " : " + JsonData[0][1]);
    // 这里可以添加图表渲染或其他UI更新逻辑
  }

  ngOnDestroy() {
    // 销毁订阅，防止内存泄漏
    if (this.dataSubscription) {
      this.dataSubscription.unsubscribe();
    }
  }
}

步骤5：对ProgrammerComponent做类似修改 #

参考Dashboard组件的逻辑，添加订阅和数据更新处理：

import { Component, OnInit, OnDestroy, ViewEncapsulation } from '@angular/core';
import { Chart } from 'chart.js';
import { AppConfig } from '../../app.config';
import { Subscription } from 'rxjs/Subscription';
import { NgbModal, ModalDismissReasons } from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'app-programmer',
  templateUrl: './programmer.component.html',
  styleUrls: ['./programmer.component.css'],
  encapsulation: ViewEncapsulation.None
})
export class ProgrammerComponent implements OnInit, OnDestroy {
  objects: any;
  private dataSubscription: Subscription;
  closeResult: string;

  constructor(
    private appConfig: AppConfig,
    private modalService: NgbModal
  ) { }

  ngOnInit() {
    this.objects = this.appConfig.objects;
    this.dataSubscription = this.appConfig.dataUpdated$.subscribe(newData => {
      this.objects = newData;
      // 这里添加你的UI更新逻辑
    });
  }

  // 你的其他组件逻辑...
  private getDismissReason(reason: any): string {
    if (reason === ModalDismissReasons.ESC) {
      return 'by pressing ESC';
    } else if (reason === ModalDismissReasons.BACKDROP_CLICK) {
      return 'by clicking on a backdrop';
    } else {
      return `with: ${reason}`;
    }
  }

  ngOnDestroy() {
    if (this.dataSubscription) {
      this.dataSubscription.unsubscribe();
    }
  }
}

关键改进点总结 #

1. RxJS Subject作为事件总线：让AppConfig能通知所有组件数据已更新
2. 响应式数据加载：下拉框选择变化时调用load方法，自动触发数据更新和UI刷新
3. 正确的初始化流程：先加载metadata，再用第一个项目初始化数据
4. 组件订阅清理：在组件销毁时取消订阅，避免内存泄漏

这样修改后，你的下拉框切换就能正确加载对应JSON数据，并自动更新Dashboard和Programmer组件的UI了。

内容的提问来源于stack exchange，提问作者Manjunath Siddappa