angular2 搜索视图

Question

我有一个树视图组件。如果尝试使用 ViewChilden 搜索元素，结果为 0。

模板：

<ul class="dropdown">
    <li class="levels-list-item" *ngFor="let level of levelsList">
        <div class="flex justify-flex-start dropdown-item align-center">
            <i class="wrapper fa fa-play rotate-90"
               [ngClass]="{'invisible': !  level.childs?.length}"
               attr.data-id="{{level.id}}"
               #dropdownTrigger></i>
            <div class="dropdown-item-inner flex full-width align-center">
                <div class="name">{{level.title}}</div>
                <div class="tools flex justify-flex-start">
                    <a class="wrapper tool" title="Добавить уровень"
                       [routerLink]="['../LevelAdd', {parentId: level.parentId}]"
                       *ngIf="isPDO(level.type)">
                        <i class="fa fa-plus"></i>
                    </a>
                    <a class="tool wrapper" title="Редактировать уровень"
                       [routerLink]="['../LevelEdit', {parentId: level.parentId, id: level.id}]">
                        <i class="fa fa-pencil"></i>
                    </a>
                </div>
            </div>
        </div>
        <levels-list-item [childs]="level.childs"></levels-list-item>
    </li>
</ul>

我在课堂上使用：

@ViewChildren("dropdownTrigger") dropdownTriggerElms: QueryList<ElementRef>;

元素只存在于儿童中。

其他组件使用 this 调用它

<levels-list-item [childs]="list | async"></levels-list-item>

Answer 1

@ViewChildren() (dropdownTriggerElms) 的结果只设置在ngAfterViewInit() 中或之后。如果您尝试从constructor 访问它，它将是null。

对于以后发生的更改，请使用dropdownTriggerElms.changes.subscribe(...)

ngAfterViewInit() {
  this.dropdownTriggerElms.changes.subscribe(value => console.log('changes', value));
}