如何在 index.html angular 8 中使用 *ngIf答案

【问题标题】：How to use *ngIf in index.html angular 8如何在 index.html angular 8 中使用 *ngIf
【发布时间】：2020-10-03 00:22:12
【问题描述】：

如何在 Angular2+ 的 index.html 中使用 *ngIf 条件。我想使用*ngIf 根据条件加载标签，因为我在本地存储中有一个值。这是我的代码，但它不起作用。

<head *ngIf="localStorage.getItem('theme_token') === 'site-layout'"></head

当我使用脚本标记时，它会在 javascript 中获取主题标记的值。

 <script>

        var _val = localStorage.getItem('theme_token'); /// This part is working returning me the value.

    </script>

注意：我不想隐藏。我必须使用*ngIf 渲染它条件。

【问题讨论】：

您可以将 index.html 放入 app.component.html 中，然后您可以使用 ngIf

标签： javascript html angular angular8

【解决方案1】：

据我所知，Angular 应用程序（其中大多数）的入口点是 <app-root></app-root>，应用程序在此处被引导，这意味着从这一点开始，角度将进入图片（内存），然后你就有了你的路线，其他组件，角度的东西，你构建应用程序的方式。

现在你想在index.html 中使用*ngIf，所以关键是你将绑定这个index.html 即使用哪个组件来提供你的*ngIf 变量，即使你只添加*ngIf='true' 它也会按原样呈现，没有任何效果或副作用

你可以做什么（可能）

尝试通过 <scrip></script> 访问 DOM 来处理纯 JS，按照你想要的方式进行更改
如果您只想使用 Angular，请在 app.component.ts 和 ngOnInit 中访问 DOM 并执行此操作。

浏览器不知道它与*ngIf 有什么关系，它是知道*ngIf 含义的角度，并且这个特定点角度尚未加载

【讨论】：

你能举个简单的javascript和app.component.ts的例子吗？
对于 JS，您可以查看此示例 JS，对于 Angular，您必须注入 DOM，一个包装器，然后您将以 Angular 方式访问 <head>，但在相同的下面工作正在进行中。使用 Angular 的唯一原因是，如果您从 API 获取一些值，并且您必须更新页面的一些 meta 标签或 title，而不是采用这种方式
您能否提供一个明确的例子。提前致谢

【解决方案2】：

你不能在外面使用 *ngIf 。我们有多种方法可以在纯 JavaScript 中做同样的事情。使用 vanila js 没有副作用。

【讨论】：

【解决方案3】：

*ngIf 不会为您解决问题。 *ngIf 将在角度内工作。试试这个例子可能会有所帮助。它适用于 Angular 8。在您的应用组件中。

    constructor() {

    if (localStorage.getItem('theme_token') === 'site-layout') {
        const temp = document.createElement('link');
        temp.innerHTML = '<link id="default-css" href="assets/somestyle.css" rel="stylesheet" media="all">'
                       ;
        const head = document.head;
        while (temp.firstChild) {
            head.appendChild(temp.firstChild);
        }

       }
}

您可以根据自己的情况进行加载。

【讨论】：