[英]entryComponents is not working in Angular 6
I have a problem when using ng-bootstrap modal in angular 6. 我在角度6中使用ng-bootstrap模态时遇到问题。
First, I have 2 module: 首先,我有2个模块:
AppModule
and ComponentModule
AppModule
和ComponentModule
Here is ComponentModule
: 这是
ComponentModule
:
@NgModule({
imports: [
CommonModule,
FormsModule,
ComponentRoutingModule,
BsDropdownModule.forRoot(),
TabsModule,
PaginationModule.forRoot(),
PopoverModule.forRoot(),
ProgressbarModule.forRoot(),
TooltipModule.forRoot(),
ModalModule.forRoot(),
NgMultiSelectDropDownModule.forRoot(),
],
declarations: [
CategoryComponent,
CourseComponent,
ModalComponent,
CategoryModalComponent,
],
entryComponents: [CategoryModalComponent],
})
export class ComponentModule { }
ComponentModule
is where I put component that will be displayed after I logged in. ComponentModule
是放置登录后将显示的ComponentModule
的位置。
In a ComponentModule
, I have a Course component: 在
ComponentModule
,我有一个Course组件:
@Component({
selector: 'app-course',
template: '<app-modal></app-modal>',
styleUrls: ['./course.component.scss']
})
export class CourseComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
Here is ModalComponent
in the same module: 这是同一模块中的
ModalComponent
:
@Component({
selector: 'app-modal',
template: '<button class="btn btn-lg btn-outline-primary" (click)="open()">Launch demo modal</button>',
styleUrls: ['./modal.component.scss']
})
export class ModalComponent implements OnInit {
constructor(private modalService: NgbModal) {}
open() {
const modalRef = this.modalService.open(CategoryModalComponent);
modalRef.componentInstance.name = 'World';
}
ngOnInit() {
}
}
and 和
@Component({
selector: 'app-category-modal',
template: `
<div class="modal-header">
<h4 class="modal-title">Hi there!</h4>
<button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss('Cross click')">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Hello, {{name}}!</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-outline-dark" (click)="activeModal.close('Close click')">Close</button>
</div>
`,
styleUrls: ['./category-modal.component.scss']
})
export class CategoryModalComponent implements OnInit {
@Input() name;
constructor(public activeModal: NgbActiveModal) {}
ngOnInit() {
}
}
I expect that when I click button in ModalComponent
, I will show a modal that its content is in CategoryModalComponent
. 我希望当我单击
ModalComponent
按钮时,将显示一个模态,其内容位于CategoryModalComponent
。 But it showed me an error: 但这显示了一个错误:
ModalComponent.html:4 ERROR Error: No component factory found for CategoryModalComponent. Did you add it to @NgModule.entryComponents?
at noComponentFactoryError (core.js:3256)
at CodegenComponentFactoryResolver.push../node_modules/@angular/core/fesm5/core.js.CodegenComponentFactoryResolver.resolveComponentFactory (core.js:3291)
at NgbModalStack.push../node_modules/@ng-bootstrap/ng-bootstrap/fesm5/ng-bootstrap.js.NgbModalStack._createFromComponent (ng-bootstrap.js:7643)
at NgbModalStack.push../node_modules/@ng-bootstrap/ng-bootstrap/fesm5/ng-bootstrap.js.NgbModalStack._getContentRef (ng-bootstrap.js:7581)
at NgbModalStack.push../node_modules/@ng-bootstrap/ng-bootstrap/fesm5/ng-bootstrap.js.NgbModalStack.open (ng-bootstrap.js:7444)
According the error, I added it in ComponentModule
but it's not working. 根据错误,我在
ComponentModule
添加了它,但是它不起作用。
Could you please give any advice to solve it? 您能提供任何建议解决它吗?
Add NgbModalModule or NgbModule to your ComponentModule. 将NgbModalModule或NgbModule添加到您的ComponentModule。
There is no ngb modules in your Components module. 您的组件模块中没有ngb模块。
nb: Tried and worked in your case. nb:尝试并在您的情况下工作。
import { NgbModalModule } from '@ng-bootstrap/ng-bootstrap';
@NgModule({
imports: [
...
NgbModalModule
],
...
})
export class ComponentModule { }
You should add 'CategoryModalComponent' as the declarations & entryComponent in Module. 您应该在模块中添加“ CategoryModalComponent”作为声明和entryComponent。
https://stackblitz.com/angular/pxgjqrndxkoq https://stackblitz.com/angular/pxgjqrndxkoq
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.