ngIf 为 false 时不立即加载模板答案

【问题标题】：ngIf not immediately loading template when falsengIf 为 false 时不立即加载模板
【发布时间】：2019-08-29 03:03:25
【问题描述】：

我有一个组件，它会在 true 时加载 Youtube 视频。但是，当 ngIf 语句的计算结果太假时，模板不会加载。问题的背景是，当广告拦截器阻止 Youtube 视频时，我试图有条件地呈现 div，只是为了让用户知道为什么内容没有加载，而不是有一个白框。我创建了一个返回布尔值的服务，我确信它正在工作。有趣的是，当我在 Chrome 开发工具元素过滤器中搜索匹配的文本时，它会触发模板加载。

到目前为止，我已经尝试将变更检测引用放入各种生命周期中。没有太多的运气。我建立在最初由其他人编写的组件上。它确实实现了 onPush 的变更检测策略。我不确定这是否会造成问题。

<div *ngIf='loadYoutube; else loadError'>
    <iframe [width]="width"
        [height]="height"
        [src]="src | safe:'url'"
        frameborder="0"
        allowfullscreen
        class="youtube-player">
    </iframe>
</div>
<ng-template #loadError>
    <p>
      Turn Yo ad blocker off please
    </p>
</ng-template>

目前，当 loadYouTube 评估为 true 时，它会按预期执行。当 false 出现一个白框。如前所述，当从 chrome 检查器的元素选项卡中搜索关键字时，模板会加载。

【问题讨论】：

您能否为此创建一个 Stackblitz。您提供的 sn-p 对我来说看起来不错。
loadYoutube 是否曾因任何原因评估为假？
当检测到广告拦截器时，加载 Youtube 应评估为 false。我只是用谷歌搜索了 StackBlitz 是什么。看起来很酷。上传代码不像商业网站那样 100% 舒服。
尝试去掉 loadYoutube 后的分号。 *ngIf='loadYoutube else loadError'
我刚刚尝试摆脱分号，恐怕结果相同。

标签： angular angular-ng-if

【解决方案1】：

Loadyoutube 总是有价值的吗？你在构造函数或 ngOnInit 中初始化它？

同时尝试使用默认策略，我认为 onPush 会在您的情况下产生问题。

【讨论】：

【解决方案2】：

感谢各位的帮助。按照惯例，问题比最初想象的要简单得多。在更高级别的主管中，实际上有一块画布占据了文本应该占据的相同区域。有趣的是，当在 chrome 元素工具中搜索关键文本时，它会将文本放在前面。这让我们认为这是一个角度渲染问题。只是有点晦涩难懂的问题。

【讨论】：