Question

我通过REST API从数据库获取html内容，然后在网站上显示。但是，当我第一次在浏览器中加载网站时，不会显示内容。只有在我单击菜单项之后。

RoutingService从api获取内容，然后我的NavComponent从RoutingService获取内容，但是那时内容仍然为空。我尝试提供可观察的对象，以便我的NavComponent可以自己订阅可观察的对象。当我这样做时，服务器过载，因为它一直在调用api。

下面是我加载网站以显示主页时运行的所有代码。

RoutingService会在init上路由到主页，并像单例一样工作。有关初始化的代码：

constructor(private templateService: TemplateService) {
    this.route('home');
  }

route(page: string) {
    if (page === 'home') {
      page = this.getHomeId();
    }
    this.requestedPage = page;
    if (!/[a-zA-Z]/.test(this.requestedPage)) {
      this.templateService.getContentById(this.requestedPage).subscribe(
        (data: any) => {
          this.content = data.content;
        }
      );
    } else {
      this.content = '';
    }
  }

getContent(): string {
    return this.content;
  }

private getHomeId(): string {
    const idTitleDict = this.templateService.getIdTitleDict();
    console.log(idTitleDict);
    const keys = Object.keys(idTitleDict);
    for (const key in keys) {
      if (idTitleDict.hasOwnProperty(key)) {
        return key;
      }
    }
  }

TemplateService：

constructor(private api: ApiService) {
    this.getTemplates().subscribe(
      (data: any) => {
        for (const key in data) {
          if (data.hasOwnProperty(key)) {
            this.idTitleDict[key] = data[key];
          }
        }
      }
    );
  }

getTemplates() {
    return this.api.get('templates')
      .pipe(map(ApiService.extractData));
  }

getIdTitleDict(): { [id: string]: string; } {
    return this.idTitleDict;
  }

显示内容的

NavComponent html行：

<div *ngIf="!editing" [innerHTML]="routingService.getContent()"></div>

Angular 2+使用来自REST API的数据

0 个答案: