使用 InnerHTML 中的 HTML 链接在 Angular 中显示该文件

Posted 2023-05-07

【中文标题】使用 InnerHTML 中的 HTML 链接在 Angular 中显示该文件

【英文标题】：Use HTML Link in InnerHTML to display that file in Angular

【发布时间】：2021-10-28 09:29:36

【问题描述】：

我想显示存储在 json 文件中的链接，如下所示：

[
    
        "heading": "Waswas",
        "content": "./waswas.html"
    ,

    
        "heading": "Flu",
        "content":""
    
]

在我的 component.ts 文件中，我将其解析为这样的数组变量：

 public treatmentsList:heading: string, content: string[] = treatments;

然后在我的 component.html 文件中我有这个：

<div>
    <h1>
        treatmentsList[0].heading
    </h1>
    <span [innerHTML]="getContent(treatmentsList[0].content) | async"></span>
</div>

但它显示的是链接而不是文件

component.ts 文件：

import  Content  from '@angular/compiler/src/render3/r3_ast';
import  Component, NgModule, OnInit  from '@angular/core';
import  SafeHtml  from '@angular/platform-browser';
import  Observable  from 'rxjs';
import  ContentService  from '../content.service';
import treatments from "./treatments.json"

var heading = "hTempl"
@Component(
  selector: 'app-treatment',
  templateUrl: './treatment.component.html',
  styleUrls: ['./treatment.component.css']
)

export class TreatmentComponent implements OnInit 
 public treatmentsList:heading: string, content: string[] = treatments;
  
 constructor(
  private readonly contentService: ContentService
)  

public getContent(path: string): Observable<SafeHtml> 
  return this.contentService.get(path);


  ngOnInit(): void 

  

app.module.ts:

import  NgModule  from '@angular/core';
import  BrowserModule  from '@angular/platform-browser';

import  AppRoutingModule  from './app-routing.module';
import  AppComponent  from './app.component';
import  TreatmentComponent  from './treatment/treatment.component';
import  PrgrefComponent  from './prgref/prgref.component';
import  HttpClientModule  from '@angular/common/http';

@NgModule(
  declarations: [
    AppComponent,
    TreatmentComponent,
    PrgrefComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
)
export class AppModule  

【问题讨论】：

您需要在 JSON 文件中嵌入 html，或者执行 http 请求以在您的 component.ts 中获取 html 文档。

然后您需要构建一个服务来获取 html 文件，然后使用 dom sanitizer 对其进行清理。如果您发布完整的 component.ts 和 component.html，我可以提供更多帮助。

我发布了一个答案，如果您有问题，请回复。

检查浏览器中的网络选项卡，是否出现错误？任何控制台错误？

发布您的 component.ts 和任何控制台错误

【参考方案1】：

创建一个服务来获取您的 html 文档，然后对其进行清理。

content.service.ts

import  HttpClient, HttpHeaders   from '@angular/common/http';
import  Injectable  from '@angular/core';
import  DomSanitizer, SafeHtml  from '@angular/platform-browser';
import  Observable  from 'rxjs';
import  map  from 'rxjs/operators';

@Injectable(
  providedIn: 'root',
)
export class ContentService 
  constructor(
    private readonly http: HttpClient,
    private readonly sanitizer: DomSanitizer
  ) 

  public get(path: string): Observable<SafeHtml> 
    const headers = new HttpHeaders(
      'Content-Type':  'text/plain',
    );
    return this.http.get(path, 
      headers,
      responseType: 'text'
    ).pipe(
      // This is unsafe if the path and content is not under your control
      map(html => this.sanitizer.bypassSecurityTrustHtml(html))
    );
  

然后在你的 component.ts 中使用服务

constructor(
  private readonly contentService: ContentService
)

public getContent(path: string): Observable<SafeHtml> 
  return this.contentService.get(path);

最后是你的 html

<span [InnerHTML]="getContent(treatmentsList[0].content) | async"></span>