如何在 Angular 的 index.html 中放置组件/模板占位符？

Posted 2023-03-13

【中文标题】如何在 Angular 的 index.html 中放置组件/模板占位符？

【英文标题】：How to put a component / template placeholder in index.html in Angular?

【发布时间】：2020-10-26 11:46:36

【问题描述】：

为了尽早显示应用程序，index.html 包含以下标记（简化）：

<div class="body-wrapper">

    <header>
        <h1>My Title</h1>
        <div class="user">
            <!-- here user information should be displayed -->
        </div>
    </header>

    <div class="main-wrapper">
        <app-root>

        </app-root>
    </div>

    <footer>My Footer</footer>

</div>

应用初始化后，我想在标题中显示用户信息。

最初我将用户标记和逻辑放在 app.component.html 中，并认为我可以将用户区域定位回标题（app-root 之外），但由于一些更复杂的 css 布局，这是不可能的规则。

现在我认为最好在 index.html 中放置一个组件占位符（或 data-user-attribute）并让应用组件在那里呈现用户组件。

困难在于，当然，在 index.html 中，任何与 Angular 相关的东西都不起作用，甚至可能会在 Angular 出现之前破坏渲染，所以我认为仅仅在其中放置 <ng-template> 是不可能的。 ..

您对此有何看法？

【问题讨论】：

如果您使用的是 angular-cli，他们已经为此目的制作了 app-shell

【参考方案1】：

是的 index.html 角度相关的东西不起作用。所以最好的办法是直接在要显示用户信息的div下面写html代码。同样，只有当您已经拥有用户信息时，这将是最好的，您不需要等待任何数据被提取。

如果有一些用于收集用户信息的 api 调用，那么您也应该在 <app-root> 中获取标题。 第二个选项不会对渲染页面产生重大影响。