Question

所以，我从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方法中最通用的部分之一。

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

编辑：再充实一下这个例子。

Answer 1

最后，我们想要做的事情真的不可能。我们需要解决的特殊情况是有多个可能的根元素供用户进行交互，但我们并不想公开逻辑来确定是否应该向最终用户显示元素。

我们不得不采用一种稍微有点破解的解决方案，该解决方案利用每个元素生成具有特定选择器的新根组件（即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 {}

Angular Use页面为组件模板生成HTML

1 个答案: