ngIf 为 false 时不立即加载模板

Question

我有一个组件，它会在 true 时加载 Youtube 视频。但是，当 ngIf 语句的计算结果太假时，模板不会加载。问题的背景是当广告拦截器阻止 Youtube 视频时，我试图有条件地呈现 div 只是为了让用户知道为什么内容没有加载而不是有一个白框。我创建了一个 returns 布尔值的服务，我确信它可以正常工作。有趣的是，当我在 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 时，它会按预期执行。如果为假，则会出现一个白框。如前所述，当从 chrome 检查器的元素选项卡中搜索关键字时，模板会加载。

Answer 1

Loadyoutube 总是有价值的？您是在构造函数中还是在 ngOnInit 中初始化的？

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

Answer 2

感谢大家的帮助。按照惯例，问题比原先想象的要简单得多。在更高级别的 competent 中，实际上有一个 canvas 占据了文本应该占据的相同区域。有趣的是，当在 chrome 元素工具中搜索关键文本时，它会将文本置于最前面。这让我们认为这是一个 angular 渲染问题。只是有点晦涩难懂。

ngIf 为 false 时不立即加载模板

ngIf not immediately loading template when false

angular-ng-if

angular