在 Angular 应用程序中使用服务器呈现的 html 的解决方法

Question

不幸的是，我们有一个多页应用程序，我们已经运行 AngularJS。现在，随着 LTS 的临近，我们正在尝试迁移到 Angular。我们曾经用服务器数据填充模板的某些部分，呈现 html 如下：

<div class="some-class" ng-controller="SomeCtrl as ctrl">
    <div>...</div> <!-- Render some data from server -->
    <div sec:authorize="isRememberMe()">...</div> <!-- Use some Thymeleaf security tags -->
</div>

但是，既然组件已经在客户端上，我正在寻找使用服务器呈现的 html 来操作模板的方法。我试过 ng-content，这在某些情况下很有用，我可以 bootstrap 组件本身在 app-root 之外，例如 Render Angular component outside the main app。但是当模板在组件本身时，这种能力也消失了。

另一种方法是将页面呈现为非 Angular、常规 html 页面（不是组件），并访问 Angular 可以提供的一些基本功能.我们过去使用的方法也允许这样做，但我不知道如何实现。

是否有我正在寻找的解决方案？

Answer 1

这是我想出的：

使用 Thymeleaf 渲染 index.html 如下：

<!DOCTYPE html>
<html lang="en"
      xmlns:th="http://www.thymeleaf.org">
<head th:replace="partials/head :: head"></head>
<body>
    <th:block th:replace="partials/header :: header"></th:block>
    <app-root th:attr="some-property=${some.value.from.model}"></app-root>
    <th:block th:replace="partials/footer :: footer"></th:block>
</body>

这将呈现：

<!DOCTYPE html>
<html lang="en"
      xmlns:th="http://www.thymeleaf.org">
<head>
    ...
</head>
<body>
    ...
    <app-root some-property="some-value"></app-root>
    ...
</body>

创建 data.service.ts:

  appData: any = {};

在app.component.ts中：

constructor(private dataService: DataService,
            private element: ElementRef) {
}

ngOnInit(): void {
    this.dataService.appData['some-property'] = this.element.nativeElement.getAttribute('some-property');
}

终于在 sub.component.ts:

constructor(private dataService: DataService) {
}

ngOnInit(): void {
    this.someProperty = this.dataService.appData['some-property'];
}

在 Angular 应用程序中使用服务器呈现的 html 的解决方法

Walkaround for using html rendered by server in an Angular application

angularjs

angular