如何从 API 接收 HTML 响应并将其绑定到 Angular 7 中的视图模板。

Question

我的 API 调用的响应是 HTML 文档，我需要将 html 响应绑定到我的 angular 模板。 我使用下面的可观察代码尝试了它，但没有运气。 请任何帮助。

服务方式：

getResults(): Observable<string> {
     return this.http.get<any>('https://stackoverflow.com/questions/tagged/angular');
  }

在组件中订阅：

ngOnInit() {
    this._apiService.getResults()
    .subscribe(data => {
      this.results = data;
    },
    error => console.log('Error from backend API', +error));
  }

Answer 1

如果我正确理解了这个问题，你会得到 html 代码，例如：

<div>Some text</div>

你想把它添加到你的模板中。？ 所以首先你必须修改你的 get 调用。 默认情况下，获取 json 响应。 你需要做的是：

getResults(): Observable<string> {
     return this.http.get<string>('https://stackoverflow.com/questions/tagged/angular',{responseType: 'text'});
  }

模板中的第二个：

<div class="one" [innerHtml]="htmlToAdd"></div>

然后在订阅者中

ngOnInit() {
    this._apiService.getResults()
    .subscribe(data => {
      this.innerHtml = data;
    },
    error => console.log('Error from backend API', +error));
  }

---

如果这是CORS问题，如果您在本地环境中工作，则必须设置代理。 去创建proxy.conf.json。

{
  "/questions/tagged/angular": {
    "target": "https://stackoverflow.com/questions/tagged/angular",
    "secure": false
  }
}

更改网址：

getResults(): Observable<string> {
     return this.http.get<any>('/questions/tagged/angular');
  }

并使用ng serve --proxy-config proxy.conf.json运行您的应用程序

Answer 2

Cors 的意思是，如果您尝试访问https://stackoverflow.com/questions/tagged/angular ，则仅当窗口 URL 为https://stackoverflow.com时才允许您发出该请求。 发出请求时您在浏览器中看到的 URL 称为origin 。 当您从 localhost 请求时，它将被阻止，因为localhost和https://stackoverflow.com是不同的。 这由名为access-control-allow-origin的响应头access-control-allow-origin 。 这将由您正在访问的特定站点设置。 我们无法改变这一点。 您可以在MDN-CORS阅读更多相关信息。

因此，出于开发目的，您可以设置一个简单的本地服务器来返回一个 html 文件。 或者尝试访问一个没有设置access-control-allow-origin标志的站点。

例如，Mozilla 站点允许所有人访问，因此如果您尝试从stackoverflow.com更改为https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS ，它将起作用。

您可以在网络选项卡中检查站点是否允许交叉访问。 见下图。 如果它的 * all 被允许，或者只允许提到的 urls 将被允许。

另请注意，angular 默认将所有请求视为json 。 如果您正在阅读其他类型，例如html ，则需要指定使用{responseType: 'text'}作为第二个参数。

this.http.get('https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS', {responseType: 'text'})
  .subscribe(data => {
    console.log(data);
  }, error => {
    console.log(error);
  });;

参见Stackblitz 现场示例