要使用Angular 9的Ivy和Wishtack ReactiveComponentLoader,需要按照以下步骤进行设置:
{
"compilerOptions": {
"enableIvy": true
}
}
npm install @wishtack/reactive-component-loader
import { Component, OnInit } from '@angular/core';
import { ReactiveComponentLoader } from '@wishtack/reactive-component-loader';
@Component({
selector: 'app-example',
template: `
Loading...
Error: {{ error }}
Project: {{ project }}
`
})
export class ExampleComponent implements OnInit {
reactiveComponentLoader: ReactiveComponentLoader;
project: string;
error: any;
loading: boolean;
constructor() {}
ngOnInit() {
this.reactiveComponentLoader = new ReactiveComponentLoader(() =>
import('./project.component').then(
({ ProjectComponent }) => ProjectComponent
)
);
this.reactiveComponentLoader.loadComponent().subscribe(
componentRef => {
const projectComponent = componentRef.instance;
this.project = projectComponent.getProject();
},
error => {
this.error = error;
},
() => {
this.loading = false;
}
);
}
}
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-project',
template: `
Project Component
`
})
export class ProjectComponent implements OnInit {
constructor() {}
ngOnInit() {}
getProject() {
return 'Project Data';
}
}
这样,你就可以在Angular 9的Ivy编译器中使用Wishtack ReactiveComponentLoader库来动态加载组件。