Угловая 13 директива viewContainerRef.createComponent передает объект созданному компоненту
Код ниже с динамическим созданием компонента в Angular 13
Директива:
import { Directive, Input, ViewContainerRef, Type } from '@angular/core';
@Directive({
selector: '[appLoader]'
})
export class LoaderDirective {
@Input() appLoader!: Type<any>;
constructor(private viewContainerRef: ViewContainerRef) {}
ngOnInit(): void {
this.viewContainerRef.createComponent(this.appLoader);
}
}
app.component.html
<div [appLoader]="component"></div>
app.component.ts
component = MyComponent
Мне также нужно передать объект в созданный компонент, который представляет собой некоторую дополнительную информацию, которая будет использоваться созданным компонентом.
Как я могу это сделать?
1 ответ
Я предполагаю, что ваша директива может быть чем-то вроде
export class LoaderDirective {
@Input() appLoader!: Type<any>;
@Input() arg:any; //<--you pass as arg any object
//you need inject ComponentFactoryResolver
constructor(private viewContainerRef: ViewContainerRef,
private componentFactoryResolver: ComponentFactoryResolver) {}
ngOnInit(): void {
//first you "create" a component
const component=this.componentFactoryResolver.resolveComponentFactory(this.appLoader)
//in componentRef you get a instance of the component
const componentRef=this.viewContainerRef.createComponent(component);
//you can access to the component using componentRef.instance
//e.g. componentRef.instance.someMethod()
// componentRef.instance.prop="what-ever"
//I choose use the object pass in the "arg" Input
Object.keys(this.arg).forEach(x=>{
componentRef.instance[x]=this.arg[x]
})
}
Вы используете как
<div [appLoader]="component" [arg]="{name:'Angular'}"></div>
Увидеть дурак стекблиц