Question

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

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

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

当我期望像null这样的内容时，它将返回<a class="active">Home</a>。但是，如果将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和竞赛条件？

Answer 1

尝试设置static:false：

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

As Angular docs says:

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

Angular ngAfterViewInit（）找不到DOM元素

1 个答案: