Tengo un problema cuando accedo a la directiva a través de View Child, me sale un error de que no está definido

1. compartido

   • tipo de filtro
     • tipo-filtro.component.ts
     • tipo-de-filtro.componente.html
   • navegación
     • nav.component.ts
     • nav.component.html
     • nav.component.scss

2. estadísticas

   • casos
     • casos.componente.ts
     • casos.componente.scss
     • casos.componente.html filtro.directiva.ts

Directiva de filtros

 @Directive({ selector: '[derFilterRef]' }) export class FilterRefDirective { constructor(public containerRef: ViewContainerRef) {} }

Casos Componente HTML

 <ng-template derFilterRef></ng-template>

Componente de navegación TS

 @Component({ selector: 'stats-nav-bar', templateUrl: './nav.component.html', styleUrls: ['./nav.component.scss'] }) export class NavComponent { @ViewChild(FilterRefDirective, { static: false }) refDir!: FilterRefDirective; constructor(private resolver: ComponentFactoryResolver) {} openStrokeFilter() { const modalFactory = this.resolver.resolveComponentFactory(FilterTypeComponent); console.log(this.refDir); this.refDir.containerRef.clear(); this.refDir.containerRef.createComponent(modalFactory); } }

Componente de navegación HTML

 <button (click)='openStrokeFilter()' class='w-100'>Stroke Type</button>

Creo que se trata de View Child porque devuelve indefinido, porque no lo busco dentro del componente, sino en otro módulo.