Только для компиляции во время выполнения вы можете создать директиву, которая будет динамически компилировать шаблон.
ОБНОВЛЕНИЕ:
Использование compileModuleAndAllComponentsAsync
для RC.6^
динамический-pipe.ts
ngAfterViewInit() {
const data = this.data.content;
const pipe = this.data.pipe;
@Component({
selector: 'dynamic-comp',
template: '{{ data | ' + pipe + '}}'
})
class DynamicComponent {
@Input() public data: any;
};
@NgModule({
imports: [BrowserModule],
declarations: [DynamicComponent]
})
class DynamicModule {}
this.compiler.compileModuleAndAllComponentsAsync(DynamicModule)
.then(({moduleFactory, componentFactories}) => {
const compFactory = componentFactories.find(x => x.componentType === DynamicComponent);
const injector = ReflectiveInjector.fromResolvedProviders([], this.vcRef.parentInjector);
const cmpRef = this.vcRef.createComponent(compFactory, 0, injector, []);
cmpRef.instance.data = data;
});
}
образец Plunker RC.6^
УСТАРЕВШЕЕ РЕШЕНИЕ
В RC.5 для этого можно использовать Compiler.compileComponentSync/Async
:
динамический-pipe.ts
@Directive({
selector: 'dynamic-pipe'
})
export class DynamicPipe {
@Input() data: CellModel;
constructor(private vcRef: ViewContainerRef, private compiler: Compiler) {}
ngAfterViewInit() {
const metadata = new ComponentMetadata({
template: '{{ data | ' + this.data.pipe + '}}'
});
const data = this.data.content;
const decoratedCmp = Component(metadata)(class DynamicComponent { data = data; });
this.compiler.compileComponentAsync(decoratedCmp)
.then(factory => {
const injector = ReflectiveInjector.fromResolvedProviders([],
this.vcRef.parentInjector);
this.vcRef.createComponent(factory, 0, injector, []);
});
}
}
И используйте это следующим образом:
<template ngFor let-cell [ngForOf]="row">
<td><dynamic-pipe [data]="cell"></dynamic-pipe></td>
</template>
См. также образец плункера RC.5, демонстрирующий эту функцию. .
В любом случае, я думаю, что решение Гюнтера предпочтительнее
person
yurzui
schedule
31.08.2016