Как прочитать HTML-файл в угловой компонент, чтобы можно было обновлять HTML-файл без повторного развертывания кода - PullRequest
Новая
       1

Как прочитать HTML-файл в угловой компонент, чтобы можно было обновлять HTML-файл без повторного развертывания кода

5 голосов
/ 26 июня 2019

Я пытаюсь добавить в папку ресурсов файл HTML, который представляет собой не что иное, как некоторые теги заголовков, даты и списки функций, которые служат примечаниями к выпуску для нашего веб-сайта. У меня есть угловой модальный компонент, который я хочу читать этот файл каждый раз, когда вызывается его маршрут, а не альтернатива наличию HTML в самом компоненте, что потребовало бы от нас повторного развертывания каждый раз, когда мы обновляли примечания к выпуску.

Как уже упоминалось, у меня изначально было это как часть моего HTML-файла компонентов, но затем он каждый раз компилировался в javascript и не мог быть обновлен без повторного развертывания. Все, что я пытался найти для чего-то подобного, похоже, указывает на то, что я делаю это таким образом. 

ReleaseNotes.html
<!DOCTYPE html>
<html lang='en' xmlns='http://www.w3.org/1999/xhtml'>
<body>
  <h1>Example header one</h1>
  <h3>03/01/2019</h3>
  <h4>Patch 1.03 Title</h4>
  <ul>
    <li>Feature that was added</li>
    <li>Feature that was added</li>
    <li>Feature that was added</li>
  </ul>
  <hr>

release-notes-modal.component.ts
export class ReleaseNotesModalComponent implements OnInit {

  faTimesCircle = faTimesCircle;

  contents: string;

  constructor(public dialogRef: MatDialogRef<ReleaseNotesModalComponent>) {
    //this.contents = System.IO.File.ReadAllText("ReleaseNotes.html");
  }

  ngOnInit() {
  }

  close() {
    this.dialogRef.close();
  }
}

1 Ответ

1 голос
/ 26 июня 2019

Есть несколько способов сделать это.Вот как я делал это в прошлом.

В контроллере в приложении c # вы должны прочитать html-файл и вернуть его: 

[HttpGet]
[Route("releasenotes")]
public async Task<IActionResult> ReadReleaseNotes()
{
    var viewPath = Path.GetFullPath(Path.Combine(HostingEnvironment.WebRootPath, $@"..\Views\Home\releasenotes.html"));
    var viewContents = await System.IO.File.ReadAllTextAsync(viewPath).ConfigureAwait(false);
    return Content(viewContents, "text/html");
}

Затем в угловом приложениив сервисе вы вызываете этот метод и извлекаете этот файл следующим образом: 

getReleaseNotes(): Observable<string> {
    return this.http
               .get([INSERT_BASE_URL_HERE] + '/releasenotes', { responseType: 'text' });
}

Затем вы можете использовать это в ReleaseNotesModalComponent через что-то вроде этого: 

@Component({
  template: '<span [innerHTML]="contents"></span>'
})
export class ReleaseNotesModalComponent implements OnInit {

  faTimesCircle = faTimesCircle;

  contents: string;

  constructor(public dialogRef: MatDialogRef<ReleaseNotesModalComponent>, private service: ReleaseNotesService) {
    service.getReleaseNotes(html => this.contents = html);
  }

  ngOnInit() {
  }

  close() {
    this.dialogRef.close();
  }
}

Для угловой сторонывещей, я создал StackBlitz пример .

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...