6

我有以下 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>

我可以carousalElements使用ViewChildren

@ViewChildren('carousalElement') carousalElements;

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

我错过了一些明显的东西吗？

4

4 回答 4

7

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

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

于 2017-04-20T05:56:57.693 回答
0

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

在 Angular 中，基本上有 3 种数据类型（这里有很多说明）：原始的、对象的和反应式的。无需赘述

@ViewChildren('carousalElement') carousalElements;

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

()=>{return this.carousalElements}

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

于 2020-06-02T16:14:57.143 回答
0

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

于 2021-03-17T14:53:00.223 回答
0

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

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

this.carousalElements.NativeElement......

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

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

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

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

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

让我知道它给了什么

于 2017-04-20T04:59:47.087 回答