Angular自定义管道读取JSON数据时DataService返回undefined如何解决

问题核心原因 #

• 异步时序问题：HttpClient.get 是异步请求，你在DataService构造函数中触发请求，但是管道在页面渲染时就会执行，此时请求还未返回，存储结果的变量还未被赋值，所以拿到的是undefined。
• 逻辑错误：你在请求回调里把jsonata的路径写死为landingpage.title，无法支持根据传入的不同key返回不同内容。
• 语法错误：包括管道装饰器括号写错、HttpClient注入时分号误写、console拼写错误等。

解决方案 #

1. 修正数据服务逻辑 #

调整为提前加载完整内容数据，对外提供按key取值的方法，使用APP_INITIALIZER保证应用启动前就完成内容加载，避免异步时序问题：

import { Injectable, APP_INITIALIZER } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import jsonata from 'jsonata';

@Injectable({
  providedIn: 'root'
})
export class DataService {
  // 存储完整的内容数据
  private fullContent: any = null;

  constructor(private readonly httpClient: HttpClient) {}

  // 应用启动时调用，加载全局内容数据
  loadContent(): Promise<any> {
    return this.httpClient.get<any>('替换为你的内容接口地址').toPromise()
      .then(content => {
        this.fullContent = content;
        return content;
      });
  }

  // 根据传入的key路径取对应内容
  getContentByKey(key: string): string {
    if (!this.fullContent) return '';
    try {
      const expression = jsonata(key);
      return expression.evaluate(this.fullContent) || '';
    } catch (e) {
      console.error('内容key解析错误', e);
      return '';
    }
  }
}

// APP_INITIALIZER提供商，应用启动前先加载内容
export function loadContentFactory(dataService: DataService) {
  return () => dataService.loadContent();
}

export const CONTENT_INIT_PROVIDER = {
  provide: APP_INITIALIZER,
  useFactory: loadContentFactory,
  deps: [DataService],
  multi: true
};

2. 修正自定义管道代码 #

import { Pipe, PipeTransform } from '@angular/core';
import { DataService } from './data.service';

@Pipe({
  name: 'content',
  pure: true
})
export class ContentPipe implements PipeTransform {
  constructor(private readonly dataService: DataService) {}

  transform(contentKey: string): string {
    return this.dataService.getContentByKey(contentKey);
  }
}

3. 调整AppModule配置 #

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';
import { AppComponent } from './app.component';
import { ContentPipe } from './content.pipe';
import { CONTENT_INIT_PROVIDER } from './data.service';

@NgModule({
  declarations: [
    AppComponent,
    ContentPipe
  ],
  imports: [
    BrowserModule,
    HttpClientModule
  ],
  providers: [CONTENT_INIT_PROVIDER],
  bootstrap: [AppComponent]
})
export class AppModule { }

4. 模板正确用法 #

注意传入字符串格式的路径，key要和JSON结构完全匹配（比如示例中landingPage的P是大写）：

{{'home.landingPage.title' | content }}
{{'home.landingPage.desc1' | content }}

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