Блог

Главная - Вопросы по программированию - Используйте HTML-ссылку в innerHTML для отображения этого файла в Angular

Используйте HTML-ссылку в innerHTML для отображения этого файла в Angular

#javascript #html #json #angular #innerhtml

Вопрос:

Я хочу отобразить ссылки, которые хранятся в файле 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 {

  }
}

приложение.модуль.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 { }

Комментарии:

1. Вам потребуется встроить html-код в файл JSON или выполнить http-запрос, чтобы получить html — документ в вашем component.ts.

2. Затем вам нужно будет создать службу для извлечения html-файлов, а затем очистить их с помощью дезинфицирующего средства dom. Если вы опубликуете свой полный компонент.ts и component.html Я могу помочь и дальше.

3. Я опубликовал ответ, ответьте, если у вас есть вопросы.

4. Проверьте вкладку «Сеть» в вашем браузере, не появляется ли там ошибка? Какие-нибудь ошибки в консоли?

5. Опубликуйте свой файл component.ts и любые ошибки консоли

Ответ №1:

Создайте службу для извлечения ваших html-документов, а затем очистите их.

контент.сервис.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))
    );
  }
}

Затем в вашем компоненте.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>
Метки: