Angular 为组件模板使用页面生成的 HTML答案

【问题标题】：Angular Use page generated HTML for component templateAngular 为组件模板使用页面生成的 HTML
【发布时间】：2017-06-07 03:13:22
【问题描述】：

所以，我正在从 AngularJS 升级到 Angular 2。由于某些内部原因，我们不得不直接升级到 4。

无论如何。我们有一些 HTML 部分需要在呈现之前由后端生成。所以，这显然意味着我不能走静态 HTML 或 HTML 文件的路线。我尝试使用我最好的谷歌搜索技能来寻找解决方案，但结果一无所获。

例如（PHP）：

<div id="appRoot">
    <div id="mainView">
<?php
if ($user->isActive()) :
    ?>
        <p>Welcome, <?php print $user->getName(); ?>!</p>
<?php
else:
    ?>
        <p>Hello newbie!</p>
<?php
endif; ?>
        <... begin main Angular Template ... >
    </div>
    <div id="sideContent">
        <... begin side Angular Template ... >
    </div>
</div>

它比某些地方要复杂一些，但这就是要点。模板的某些部分不会被渲染，或者会使用不依赖于 Angular 应用程序而是依赖于后端的不同值来渲染。

我希望有办法做到这一点，但到目前为止我的搜索已经产生了鹅蛋。如果这是真的而且无法做到，我真的不明白为什么 AngularJS 方法中最通用的部分之一被删除了。

无论如何，我们将不胜感激。

编辑：进一步充实示例。

【问题讨论】：

标签： javascript php html angular templates

【解决方案1】：

最终，我们想要做的事情实际上是不可能的。我们需要解决的特殊情况是有多个可能的根元素供用户交互，但我们不想向最终用户公开确定是否应向最终用户显示这些元素的逻辑。

我们不得不采用一种稍微有点 hack-ish 的解决方案，该解决方案利用为每个元素生成带有特定选择器的新根组件（即selector: "div#element1"）。这是针对此特定问题的最广泛可用且显然已使用的解决方案。 Angular 团队显然知道这一点，目前尚不清楚他们是否会在未来解决这个问题。

最终的解决方案是找到页面上需要根元素的所有元素，遍历它们并分配一个唯一的选择器（使用 ID 选择器），然后将具有该选择器的新组件类添加到引导组件。

即

const BOOTSTRAP_ELEMENTS: any[] = [];
const DECLARATION_COMPONENTS: any[] = [];
let elements = document.getElementsByClassName('.custom-elements');
elements.map(
    (index: number, element: Element) => {
        let selector = 'custom-element#' + element.getAttribute('id');
        let component = getCustomComponentForSelector('.selector');
        BOOTSTRAP_ELEMENT.push(component);
        DELCARATION_COMPONENTS.push(component);
        element.className += selector;
    }
);

@NgModule({
    ...
    declarations: DECLARATION_COMPONENTS,
    bootstrap: BOOTSTRAP_COMPONENTS,
    ...
})
export class MyModule {}

【讨论】：