Angular ngAfterViewInit() 找不到 DOM 元素答案

【问题标题】：Angular ngAfterViewInit() not finding DOM elementAngular ngAfterViewInit() 找不到 DOM 元素
【发布时间】：2019-10-22 12:16:49
【问题描述】：

我正在尝试定位导航中具有活动类的菜单项元素，以执行一些自定义动画。

export class NavComponent implements AfterViewInit {
    @ViewChild('container', { static: true }) container: ElementRef

    ngAfterViewInit() {
        const activeEl = this.container.nativeElement.querySelector('.active')
        console.log(activeEl)
    }
}

当我期待像 <a class="active">Home</a> 这样的东西时，这将返回 null。但是，如果我将 querySelector 包装在 setTimeout 函数中，我会得到正确的结果。

这让我觉得ngAfterViewInit() 在路由器完成其事件之前触发了。

我写了一个函数来订阅路由器事件，但是结果是一样的

constructor(private route: Router) {
    this.routeEvent(this.route)
}

routeEvent(router: Router) {
    router.events.subscribe(e => {
        if (e instanceof NavigationEnd) {
            this.container.nativeElement.querySelector('.active')
        }
    })
}

这也将返回 null 但如果我也将它包装在 setTimeout 中，如果可行的话。

我的链接是这样的

<nav #container>
    <a class="link" [routerLink]="['/link1']" routerLinkActive="active">Link1</a>
    <a class="link" [routerLink]="['/link2']" routerLinkActive="active">Link2</a>
    <a class="link" [routerLink]="['/link3']" routerLinkActive="active">Link3</a>
    <a class="link" [routerLink]="['/link4']" routerLinkActive="active">Link4</a>
</nav>

我只是想在某种生命周期方法或可观察事件结束时获取与活动类链接的 DOM 元素。我是否遗漏了什么，或者我被 setTimeouts 和竞态条件困住了？

【问题讨论】：

<a #container class="link" [routerLink]="['/home']" routerLinkActive="active">Home</a>

标签： javascript angular angular-routing

【解决方案1】：

尝试设置static:false:

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

As Angular docs says:

在官方 API 文档中，我们一直建议检索查询导致ngAfterViewInit 用于查看查询，ngAfterContentInit 用于内容查询。这是因为到那时那些生命周期钩子运行，相关节点的变更检测已经完成，我们可以保证我们已经收集了所有可能的查询结果。大多数应用程序都希望使用{static: false} 原因。此设置将确保查询匹配依赖于绑定分辨率（例如，*ngIfs 或 *ngFor's 中的结果）将是由查询找到。

【讨论】：