Angular 8 @ViewChild 返回未定义。无法访问 ElementRef答案

【问题标题】：Angular 8 @ViewChild returns undefined. Can't access ElementRefAngular 8 @ViewChild 返回未定义。无法访问 ElementRef
【发布时间】：2023-03-05 06:31:01
【问题描述】：

我正在尝试访问component 中模板中的元素。我添加了对元素的引用。我可以在模板中访问这些元素，但在组件代码中，当我使用 @ViewChild 获取引用时，它们返回 undefined。

这是我的模板代码。

<a #cartMenuButton class="nav-link cart-menu-button" (click)="cartMenuClick($event)">
    <i class="fas fa-shopping-cart"></i>&nbsp;{{getCartCount()}}</a>


<div #cartMenuContainer class="cart-menu-container" (click)="cartMenuContainerClick($event)"
    [style.display]="cartMenuVisible?'block':'none'">

    <div #cartMenu class="cart-menu" [style.left.px]="cartMenuButton.offsetLeft-240"
        [style.top.px]="cartMenuButton.offsetTop+cartMenuButton.offsetHeight">

        <div class="cart-menu-items bg-light">

            <ul class="list-group">

                <app-cart-menu-item class="list-group-item bg-light" *ngFor="let item of sessionService.getCart()"
                    [item]="item">

                </app-cart-menu-item>
            </ul>
        </div>

        <div class="cart-menu-footer bg-dark">
            <a routerLink="/cart" class="text-light float-left">Go to cart</a>
            <a class="text-light float-right">Clear cart</a>
        </div>

    </div>

</div>

这是我的组件。

import { Component, ViewChild, ElementRef } from '@angular/core';
import { SessionService } from '../../../../services/session.service';

@Component({
    selector: 'app-cart-menu',
    templateUrl: 'cart-menu.component.html',
    styleUrls: ['cart-menu.component.scss']
})
export class CartMenuComponent {

    public cartMenuVisible: boolean = false;

    @ViewChild('cartMenuButton', { read: Element, static: false })
    public cartMenuButton: ElementRef;

    @ViewChild('cartMenuContainer', { read: Element, static: false })
    public cartMenuContainer: ElementRef;

    constructor(public sessionService: SessionService) {
    }

    getCartCount(): number {
        var count = this.sessionService.getCart() ? this.sessionService.getCart().reduce((acc, cur) => acc + cur.count, 0) : 0;
        return count;
    }

    cartMenuClick(event: MouseEvent) {
        this.cartMenuVisible = true;
    }

    cartMenuContainerClick(event: MouseEvent) {
        if (event.currentTarget === this.cartMenuContainer.nativeElement)
            this.cartMenuVisible = false;
    }
}

在cartMenuContainerClick 函数中this.cartMenuContainer 返回undefined。

【问题讨论】：

标签： angular angular8

【解决方案1】：

我在自己的应用中尝试了几个示例，这种组合似乎效果很好。

@ViewChild('cartMenuContainer', {static: false}) cartMenuContainer: ElementRef;

根据文档，将 static 选项设置为 true 并不能保证加载所有可用元素以供查询。

https://angular.io/guide/static-query-migration#how-do-i-choose-which-static-flag-value-to-use-true-or-false

【讨论】：

【解决方案2】：

尝试设置static: true，因为查询结果将在ngOnInit中提供：

@ViewChild('cartMenuContainer', {static: true}) cartMenuContainer: ElementRef;

There is a great article about query in Angular documentation.

【讨论】：

它在点击函数中未定义，所以我认为它是否在 ngOnInit 或稍后可用并不重要
它在 ngOnInit 中返回 undefined。
@aliemre 你试过设置 static:false 吗？没有 read 属性？