我正在尝试动态创建和显示组件,我需要将一些数据传递给它,以便它知道要显示什么。
这是我的代码:
html部分:
<div class="basicContainer">
<div class="projectsTreeContainer">
<input type="text" id="searchWord" placeholder="Search through projects"/>
<button (click)="loadAddProject()">Add new Project</button>
<app-projects-tree (onLoadProjectDetails)="loadProjectDetails($event)"
(onLoadWpDetails)="loadWpDetails($event)"
(onSelectAndLoadJobDetails)="loadJobDetails($event)"></app-projects-tree>
</div>
<div class="infoContainer">
<ng-container *ngComponentOutlet="details"></ng-container>
</div>
</div>
组件:
export class ProjectsComponent implements OnInit {
details: Component;
private showWp: boolean;
constructor() {
}
loadProjectDetails(project: BasicProject): void {
this.details = new ProjectComponent(project);
}
以及我想要动态创建和显示的组件:
export class ProjectComponent implements OnInit {
project: Project;
constructor(basicProject: BasicProject) {
this.project = new Project();
this.project.name = basicProject.name ;
}
模块:
@NgModule({
declarations: [
AppComponent,
NavbarComponent,
LoginComponent,
ProjectsComponent,
ProjectComponent,
ProjectsTreeComponent,
TreeProjectComponent,
TreeWpComponent,
WpComponent,
JobComponent,
AddProjectComponent
],
imports: [
BrowserModule,
FormsModule,
RouterModule.forRoot(
AppRoutes.appRoutes,
// {enableTracing: true} // <-- debugging purposes only
),
HttpClientModule,
HttpModule
],
providers: [
AuthenticationService,
ProjectsService,
CanActivateAuthGuard,
{
provide: HTTP_INTERCEPTORS,
useClass: AuthInterceptor,
multi: true
}],
bootstrap: [AppComponent],
entryComponents: [ProjectComponent, WpComponent, JobComponent, AddProjectComponent]
})
错误信息:
ProjectsComponent.html:15 ERROR Error: No component factory found for [object Object].
我怎样才能完成任务?
谢谢。
最佳答案
如果你打开NgComponentOutlet
的代码指示:
@Directive({selector: '[ngComponentOutlet]'})
export class NgComponentOutlet implements OnChanges, OnDestroy {
@Input() ngComponentOutlet: Type<any>;
@Input() ngComponentOutletInjector: Injector;
你可以注意到它需要ngComponentOutlet
应具有类型 Type<any>
的输入但是您正在将对象传递给它。我们还可以看到该指令可以采用
Injector
如@Input
.因此,让我们利用这些知识来完成您的任务。例如我们写了这样的模板:
<ng-container *ngComponentOutlet="component; injector: injector"></ng-container>
现在让我们声明component
和 injector
组件类中的属性:@Component({...})
export class AppComponent {
component: Type<any>;
injector: Injector;
constructor(private inj: Injector) {}
ngOnInit() {
this.component = ProjectComponent; // note: we're passing type here
this.injector = Injector.create([
{ provide: BasicProject, useValue: new Project('test name') }
], this.inj);
}
}
和你的ProjectComponent
现在使用 Angular DI 机制来获取我们传递给注入(inject)器的数据:export class ProjectComponent {
name: string;
constructor(project: BasicProject) {
this.name = project.name;
}
}
Stackblitz Example
关于Angular:如何通过 Injector 在 ngComponentOutlet 中传递数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48188151/