Issue
I have a test component which contains an example of two directives (one as an attribute directive). In the test component I'm useing the ViewChild decorator to try and get a reference to the directives in the ngAfterViewInit
handler. However the ViewChild
for each directive I'm testing returns undefined
. When I inspect the page though the directives are present in the DOM.
Here is a StackBlitz example: https://stackblitz.com/edit/stackblitz-starters-f3g4sv?file=src%2Ftest.component.ts
Here is the test component:
import {
AfterViewInit,
ChangeDetectionStrategy,
Component,
QueryList,
ViewChild,
ViewChildren,
ViewEncapsulation,
} from '@angular/core';
import { CommonModule } from '@angular/common';
import { TestContainerDirective } from './test-container.directive';
import { OtherContainerDirective } from './other-test-container.directive';
@Component({
selector: 'app-test',
standalone: true,
imports: [CommonModule, OtherContainerDirective],
templateUrl: './test.component.html',
styleUrl: './test.component.scss',
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class AppTestComponent implements AfterViewInit {
@ViewChild(TestContainerDirective)
public _testContainerRef!: TestContainerDirective;
@ViewChild(OtherContainerDirective)
public _otherContainerRef!: OtherContainerDirective;
@ViewChildren(TestContainerDirective)
_testContainerChildren!: QueryList<TestContainerDirective>;
constructor() {}
public ngAfterViewInit(): void {
console.log('_testContainerRef', this._testContainerRef);
console.log('_otherContainerRef', this._testContainerRef);
console.log('_testContainerChildren', this._testContainerChildren);
setTimeout(() => {
console.log('_testContainerRef', this._testContainerRef);
console.log('_otherContainerRef', this._testContainerRef);
}, 0);
}
}
Here is its template:
<p>This is the test component</p>
<span>
Open the console and look for the references to the directives below
</span>
<p></p>
<div appTestContainer>test container</div>
<other-container>other container</other-container>
And Here are the test directives:
@Directive({
standalone: true,
selector: '[appTestContainer]',
})
export class TestContainerDirective {
constructor(public viewContainer: ViewContainerRef) {}
}
@Directive({
standalone: true,
selector: 'other-container',
})
export class OtherContainerDirective {
constructor(public viewContainer: ViewContainerRef) {}
}
This seems to be just like the approach in the docs so I'm not sure what I'm missing. Any help is appreciated!
Solution
You are missing importing the TestContainerDirective
in the TestComponent
.
@Component({
...
imports: [CommonModule, TestContainerDirective, OtherContainerDirective],
...
})
Also, there are some mistakes that you are referring "_otherContainerRef" as this._testContainerRef
, supposing you mean this._otherContainerRef
.
public ngAfterViewInit(): void {
console.log('_testContainerRef', this._testContainerRef);
console.log('_otherContainerRef', this._otherContainerRef);
console.log('_testContainerChildren', this._testContainerChildren);
setTimeout(() => {
console.log('_testContainerRef', this._testContainerRef);
console.log('_otherContainerRef', this._otherContainerRef);
}, 0);
}
Answered By - Yong Shun
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.