我正在尝试在我的资产文件夹中创建一个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();
}
}
有几种方法可以实现这一点。我过去就是这样做的。
在 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();
}
}
对于 Angular 方面，我创建了一个StackBlitz 示例。
| 归档时间： |
|
| 查看次数： |
64 次 |
| 最近记录： |