前端之家收集整理的这篇文章主要介绍了
Angular2：从服务响应动态加载组件，
前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。
@H_
403_0@
我知道这不是最好的
解决方案,但我希望能够从JSON响应中动态加载组件,这些
内容如下：
app.component
@Component({
selector: 'my-app',template: '<h1>My First Angular 2 App</h1> {{component.title}} {{component.selector}}',providers: [AppService],directives: [ExampleComponent]
})
export class AppComponent implements OnInit {
component:{};
constructor(
private _appService: AppService) {
}
ngOnInit() {
this.component = this._appService.getComponent();
}
}
app.service
@Injectable()
export class AppService {
component = {
title: 'Example component',selector: '<example></example>'
}
getComponent() {
return this.component;
}
}
example.component
@Component({
selector: 'example',template: 'This a example component'
})
export class ExampleComponent {
}
如果我运行此示例,我的输出是< example>< / example>但它实际上并没有渲染组件.我也尝试使用[innerHtml] =“component.selector”,但这也没有用.有没有人有想法或建议？
更新
创建组件的代码有所改变.
一个工作示例可以在Angular 2 dynamic tabs with user-click chosen components找到
要动态插入组件,可以使用ViewContainerRef.createComponent()
对于声明性方法,您可以使用辅助组件
@Component({
selector: 'dcl-wrapper',template: `<div #target></div>`
})
export class DclWrapper {
@ViewChild('target',{read: ViewContainerRef}) target;
@Input() type;
cmpRef:ComponentRef;
private isViewInitialized:boolean = false;
constructor(private resolver: ComponentResolver) {}
updateComponent() {
if(!this.isViewInitialized) {
return;
}
if(this.cmpRef) {
this.cmpRef.destroy();
}
this.resolver.resolveComponent(this.type).then((factory:ComponentFactory<any>) => {
this.cmpRef = this.target.createComponent(factory)
});
}
ngOnChanges() {
this.updateComponent();
}
ngAfterViewInit() {
this.isViewInitialized = true;
this.updateComponent();
}
ngOnDestroy() {
if(this.cmpRef) {
this.cmpRef.destroy();
}
}
}
另见Angular 2 dynamic tabs with user-click chosen components
在你的例子中,你可以使用它
@Component({
selector: 'my-app',template: '<h1>My First Angular 2 App</h1> {{component.title}} <dcl-wrapper [type]="component.type"></dcl-wrapper>',directives: [ExampleComponent]
})
export class AppComponent implements OnInit {
component:{};
constructor(
private _appService: AppService) {
}
ngOnInit() {
this.component = this._appService.getComponent();
}
}
import {ExampleComponent} from './example.component.ts';
@Injectable()
export class AppService {
component = {
title: 'Example component',type: ExampleComponent
}
getComponent() {
return this.component;
}
}
