[英]Angular2: Loading components dynamically from a service response
I'm aware this is not the best solution but I would like to be able to load components dynamically from a JSON response, something along these lines: 我知道这不是最好的解决方案,但我希望能够从JSON响应中动态加载组件,这些内容如下:
@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();
}
}
@Injectable()
export class AppService {
component = {
title: 'Example component',
selector: '<example></example>'
}
getComponent() {
return this.component;
}
}
@Component({
selector: 'example',
template: 'This a example component'
})
export class ExampleComponent {
}
If I run this example, my output is <example></example>
but it doesn't actually render the component. 如果我运行此示例,我的输出是
<example></example>
但它实际上并不呈现组件。 Also I've tried to use [innerHtml]="component.selector"
, but that also didn't work. 我也尝试使用
[innerHtml]="component.selector"
,但这也[innerHtml]="component.selector"
。 Does anyone have an idea or suggestion? 有没有人有想法或建议?
update 更新
The code to create components has changed a bit. 创建组件的代码有所改变。 A working example can be found in Angular 2 dynamic tabs with user-click chosen components
可以在Angular 2动态选项卡中找到一个工作示例, 其中包含用户单击选择的组件
To insert a component dynamically you can use ViewContainerRef.createComponent()
要动态插入组件,可以使用
ViewContainerRef.createComponent()
For a declarative approach you can use a helper component like 对于声明性方法,您可以使用辅助组件
@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();
}
}
}
See also Angular 2 dynamic tabs with user-click chosen components 另请参阅Angular 2动态选项卡,其中包含用户单击所选组件
In you example you can use it like 在你的例子中你可以使用它
@Component({
selector: 'my-app',
template: '<h1>My First Angular 2 App</h1> {{component.title}} <dcl-wrapper [type]="component.type"></dcl-wrapper>',
providers: [AppService],
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;
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.