[英]entryComponents is not working in Angular 6
我在角度6中使用ng-bootstrap模態時遇到問題。
首先,我有2個模塊:
AppModule
和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
是放置登錄后將顯示的ComponentModule
的位置。
在ComponentModule
,我有一個Course組件:
@Component({
selector: 'app-course',
template: '<app-modal></app-modal>',
styleUrls: ['./course.component.scss']
})
export class CourseComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
這是同一模塊中的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() {
}
}
和
@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() {
}
}
我希望當我單擊ModalComponent
按鈕時,將顯示一個模態,其內容位於CategoryModalComponent
。 但這顯示了一個錯誤:
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)
根據錯誤,我在ComponentModule
添加了它,但是它不起作用。
您能提供任何建議解決它嗎?
將NgbModalModule或NgbModule添加到您的ComponentModule。
您的組件模塊中沒有ngb模塊。
nb:嘗試並在您的情況下工作。
import { NgbModalModule } from '@ng-bootstrap/ng-bootstrap';
@NgModule({
imports: [
...
NgbModalModule
],
...
})
export class ComponentModule { }
您應該在模塊中添加“ CategoryModalComponent”作為聲明和entryComponent。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.