@ViewChildren 不会使用动态添加的 DOM 元素进行更新答案

【问题标题】：@ViewChildren does not get updated with dynamically added DOM elements@ViewChildren 不会使用动态添加的 DOM 元素进行更新
【发布时间】：2017-09-16 13:14:32
【问题描述】：

我有以下 DOM 结构

<div #carousalElement>
    <div  class="singleCaousalElement">
        <a>
            <img [src]="carousalURL1" class="carousalImage">
        </a>
    </div>
    <div  class="singleCaousalElement">
        <a>
            <img [src]="carousalURL2" class="carousalImage">
        </a>
    </div>
</div>

我可以使用ViewChildren 获取所有具有carousalElements 类的div

@ViewChildren('carousalElement') carousalElements;

问题：当我在#carousalElement div 下动态添加新的div 时，它不会显示在carousalElements 数组下。

我是否遗漏了一些明显的东西？

【问题讨论】：

如何添加新的div？
使用this.carousalContainer.nativeElement.insertAdjacentHTML('afterbegin', 'newDivText');
carousalContainer 是什么？
无论如何它都行不通，因为如果你想更新*ngFor，你需要使用carousalElements

标签： angular viewchild

【解决方案1】：

Angular 无法识别不是由 Angular 指令或 API 添加的 HTML。此外，如果<div> 没有模板变量#carousalElement，@ViewChildren('carousalElement') 将找不到它。

模板变量需要静态添加到组件模板中。动态添加它们是没有意义的。 Angular 仅在模板编译期间处理特定于 Angular 的模板构造。

【讨论】：

【解决方案2】：

当您在 carousalElement div 中添加新元素时，请在 DOM 中检查该元素是否可用。

如果可用，通过以下方式获取元素：

this.carousalElements.NativeElement......

如果不可用，则尝试设置一些超时，然后在 DOM 中再次检查

setTimeout(() => {
        //your logic
    }, 200);

仍然找不到，然后尝试以下逻辑：

@ViewChildren('carousalElement', { read: ViewContainerRef })
public carousalElement: QueryList<ViewContainerRef>;

在哪里查看 console.log(this.carousalElement)

让我知道它给了我什么

【讨论】：

如果我执行 `document.querySelectorAll('.singleCaousalElement')' 我得到了新添加的 div，所以这意味着它已被添加，但我无法使用 ViewChildren 引用它，因为它只在 ngOnInit 期间解析了 dom，并且在添加新的 DOM 元素时不刷新。

【解决方案3】：

在 JavaScript 中有两种数据类型：原始数据类型和对象数据类型。

在 Angular 中，基本上有 3 种数据类型（此处略加赘述）：原始数据类型、对象数据类型和反应数据类型。不再赘述

@ViewChildren('carousalElement') carousalElements;

属于反应数据类型。在 Angular 中，这意味着在这种情况下有一个观察者使用 caoursalElement 模板变量的元素数量，您的变量 carousalElements 是订阅 @ViewChildren 的高级形式，它是一个观察者来访问您只需简单地更新的数组需要

()=>{return this.carousalElements}

确保您的 HTML 模板正确使用您的模板变量，这应该可以工作

【讨论】：

【解决方案4】：

当您使用您在 ViewChildren QueryList 中引用的 ref 添加另一个孩子时，您可以添加服务 ChangeDetectorRef 并调用方法 this.changeDetectorRef.detectChanges()。这对我有用！

【讨论】：