Angular ngAfterViewInit() 找不到 DOM 元素

Question

I am trying to target a menu item element in my navigation that has an active class in order to do some custom animations.

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

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

This returns null when I am expecting something like <a class="active">Home</a> . However if I wrap the querySelector in a setTimeout function I get the correct result.

This made me think ngAfterViewInit() was firing before the router was finished its events.

I wrote a function to subscribe to the router events however it has the same result

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

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

This will also return null but if I wrap this in a setTimeout as well if works.

My links look like this

<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>

I am just trying to get the DOM element of the link with the active class at the end of some sort of lifecycle method or observable event. Am I missing something or am I stuck with setTimeouts and race conditions?

Answer 1

Try to set static:false :

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

As Angular docs says:

In the official API docs, we have always recommended retrieving query results in ngAfterViewInit for view queries and ngAfterContentInit for content queries. This is because by the time those lifecycle hooks run, change detection has completed for the relevant nodes and we can guarantee that we have collected all the possible query results. Most applications will want to use {static: false} for the same reason. This setting will ensure query matches that are dependent on binding resolution (eg results inside *ngIfs or *ngFor's ) will be found by the query.

Answer 2

You are missing #container on the element:

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

#container references the element with @ViewChild() . The @ViewChild() decorator queries for the element using the selector which is container in your case.

Edit for the updated question:

For getting the children elements use ElementRef<HTMLElement>; :

@ViewChild('container', { static: true }) container: ElementRef<HTMLElement>;