gpt4 book ai didi

c# - 如何将 HTML 文件读入 Angular 组件,以便在不重新部署代码的情况下更新 HTML 文件

转载 作者:太空狗 更新时间:2023-10-29 17:38:41 25 4
gpt4 key购买 nike

我想在我的 Assets 文件夹中创建一个 HTML 文件,它只是一些 header 标签、日期和功能列表,用作我们网站的发行说明。我有一个 Angular 模态组件,每次调用它的路由时我都想读取这个文件,而不是在组件本身中包含 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();
}
}

最佳答案

您可以通过多种方式完成此操作。我过去就是这样做的。

在 C# 应用程序的 Controller 中,您将读取 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");
}

然后在服务的 Angular 应用程序中,您将调用此方法并按如下方式检索此文件:

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();
}
}

对于事物的 Angular 方面,我创建了一个 StackBlitz example .

关于c# - 如何将 HTML 文件读入 Angular 组件,以便在不重新部署代码的情况下更新 HTML 文件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56774228/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com