I am opening a Modal in two different ways Stackblitz Example:
Calling a method in a component which calls the Modal Service:
<button (click)="openModal()">Open Modal</button>
export class AppComponent {
constructor(private modalService: ModalService) { }
openModal() {
this.modalService.open(HelloComponent);
}
}
The Modal service creates the component dynamically.
Using a directive that then calls the ModalService:
<button [modal]="'HelloComponent'">Open Modal</button>
@Directive({
selector: '[modal]'
})
export class ModalDirective {
@Input('modal') identifier: string;
constructor(private modalService: ModalService) { }
@HostListener('click', ['$event'])
clickEvent(event) {
event.preventDefault();
event.stopPropagation();
this.modalService.open(this.identifier);
}
}
Option (1) works fine but option (2) returns an error:
Error: No component factory found for HelloComponent. Did you add it to @NgModule.entryComponents?
I have in my AppModule the following:
@NgModule({
imports: [ BrowserModule, FormsModule ],
exports: [ ModalDirective ],
declarations: [ AppComponent, HelloComponent, ModalDirective ],
entryComponents: [HelloComponent],
bootstrap: [ AppComponent ]
})
So I am not sure why this is not working ...
See Question&Answers more detail:
os 与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…