[英]Angular2 dynamically reference and create Component
For example, I have a list of options in one Component, where clicking on one renders a Component dynamically based on the user's selection. 例如,我在一个组件中有一个选项列表,其中单击一个组件会根据用户的选择动态地渲染一个组件。 This is how I image it would be done:
这是我想象的方式:
List Component 列表组件
import { Component } from '@angular/core';
@Component({
selector: 'list-component',
templateUrl: `
<ul>
<li *ngFor="let item from list" (click)="onClick(item)">{{item.name}}</li>
</ul>
`
})
export class ListComponent {
list = [
{name: 'Component1'},
{name: 'Component2'},
{name: 'Component3'}
]
constructor(private _listService: ListService) {
}
onClick(item) {
this._listService.renderComponent(item);
}
}
Render Component 渲染组件
import { Component, ViewContainerRef } from '@angular/core';
@Component({
selector: 'render-component',
templateUrl: `
<div #dynamicComponent></div>
`
})
export class RenderComponent {
@ViewChild('dynamicComponent', { read: ViewContainerRef })
private dynamicComponent: any;
constructor(
private _listService: ListService,
private resolver: ComponentFactoryResolver
) {
this._listService.onRenderComponent.subscribe(item => {
let componentReference;
//TODO: Get Component by reference ???
let componentFactory = this.resolver.resolveComponentFactory(componentReference);
this.dynamicComponent.createComponent(componentFactory);
})
}
}
I've left the details about ListService
but it is essentially a service that allows the two components to communicate. 我已经保留了有关
ListService
的详细信息,但实际上它是一种允许两个组件进行通信的服务。
I would prefer not to have references to components inside ListComponent like so: 我希望不要像这样在ListComponent中引用组件:
import {Component1, Component2, Component3} from './otherComponents';
...
list = [
{name: 'Component1', component: Component1},
{name: 'Component2', component: Component2},
{name: 'Component3', component: Component3}
]
...
this._listService.onRenderComponent.subscribe(item => {
let componentReference = item.component;
let componentFactory = this.resolver.resolveComponentFactory(componentReference);
this.dynamicComponent.createComponent(componentFactory);
})
and let the ListService handle it. 并让ListService处理它。
So essentially, does angular provide methods for retrieving a Component based on some references such as selector
, componentId
or something along those line? 因此,从本质上讲,angular是否提供基于某些引用(例如
selector
, componentId
或沿这些路线的内容)检索Component的方法?
If you using Angular 2.0 final (which I don't think you are), you can actually resolve the component via a selector. 如果您使用的是Angular 2.0 final(我认为不是),则实际上可以通过选择器来解析组件。
const compFactory = this.factory.componentFactories.find(x => x.selector === 'my-component-selector');
const injector = ReflectiveInjector.fromResolvedProviders([], this.vcRef.parentInjector);
const cmpRef = this.vcRef.createComponent(compFactory, this.vcRef.length, injector, []);
I have a minimalist example of dynamic component creation here 我在这里有一个动态组件创建的极简示例
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.