Angular使用路由场景下如何在app.component.ts中发起API请求

首先排除你猜测的路由问题，AppComponent作为根组件，ngOnInit生命周期一定会正常触发，不会被路由拦截，之前没有打印内容是因为你最开始的错误捕获逻辑没有输出完整信息。

问题根因 #

Angular HttpClient 发起请求时默认会将响应内容按JSON格式解析，你的/about接口返回纯文本，解析JSON失败就会抛出你看到的语法错误，导致无法正常拿到返回值。

解决方案 #

只需要在AboutService的getAbout方法中，给get请求添加配置项，指定responseType为text即可，修改后的代码如下：

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class AboutService {

  private baseUrl = "http://localhost:8080/myapi/v1/about";

  constructor(private httpClient: HttpClient) { }

  getAbout(): Observable<string> {
    // 新增第二个参数指定响应类型为纯文本，关闭JSON解析逻辑
    return this.httpClient.get(this.baseUrl, {responseType: 'text'});
  }
}

额外优化建议 #

你的about变量初始值为undefined，为了避免页面初始渲染时出现空值闪烁，可在模板中加个空值兜底：

<footer class="footer">
  <div class="container">
    <span>{{about || ''}}</span>
  </div>
</footer>

修改完成后重启应用即可正常拿到纯文本响应内容，显示在页脚位置。

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