Для передачи компонента в директиву через пропсы в Angular можно использовать декоратор @Input()
.
Шаги:
1. Определите свойство типа Component
в директиве, используя декоратор @Input()
:
@Directive({ selector: '[myDirective]' }) export class MyDirective { @Input() myComponent: Component; }
2. В компоненте, который будет использовать эту директиву, укажите директиву и передайте компонент через пропсы:
<my-component [myDirective]="myComponent"></my-component>
3. Воспользуйтесь свойством в соответствующем месте директивы, где вам требуется использовать компонент:
@Directive({ selector: '[myDirective]' }) export class MyDirective { @Input() myComponent: Component; constructor(private viewContainerRef: ViewContainerRef, private componentFactoryResolver: ComponentFactoryResolver) {} ngOnInit() { const componentFactory = this.componentFactoryResolver.resolveComponentFactory(this.myComponent); const componentRef = this.viewContainerRef.createComponent(componentFactory); } }
В этом примере, мы используем ComponentFactoryResolver
для создания фабрики компонента, а ViewContainerRef
для создания компонента в нужном месте.
Таким образом, компонент будет передан в директиву через пропсы и директива сможет использовать его, создавая его экземпляр в нужном месте.