3 回答

TA貢獻1786條經(jīng)驗 獲得超13個贊
盡管可能不是最優(yōu)雅的解決方案,但我使用DynamicComponentLoader和ElementRef將模板值動態(tài)分配給組件。實際上,我在尋找一種解決方案,可以將多個自定義組件添加到占位符中。
我嘗試了shmck概述的函數(shù)中的服務注入,由于調用模板函數(shù)時服務尚不可用,因此無法正常工作。確實,this是指Window對象。
我使用的解決方案的參考URL可在以下位置找到:在Angular2中使用ComponentResolver和ngFor創(chuàng)建動態(tài)的anchorName / Components
我也將此方式稱為Plnkr1和Plnkr2。
Dartdocs網(wǎng)站提供了有關Angular 2 DynamicComponentLoader類的出色文檔,該類也適用于TypeScript。
簡而言之:
一個簡單的組件作為要使用的模板
@Component({
selector: 'dt2-simple-block',
properties: ["idx"],
template: `<h1>Simple block for {{ idx }} </h1>`,
directives: []
})
class dt2SimpleBlock {
constructor() {
}
}
包含所有要添加的組件的Component的構造方法(我的應用程序要求包含多個子元素:
constructor(loader: DynamicComponentLoader, elementRef: ElementRef) {
//iterate
for (var i = 0; i < toSomething; i++) {
// build the template
var blockdirective = 'dt2-simple-block'
var template = '<' + blockdirective +
' idx="' + this.userBlocks.userHomePanelBlocks[i] +
'"></' + blockdirective + '>';
console.log(template); // debugging purpose
var directives = [dt2SimpleBlock];
loader.loadNextToLocation(toComponent(template, directives), elementRef);
}
并將輔助功能作為util放置在某處
function toComponent(template, directives = []) {
@Component({ selector: 'fake-component' })
@View({ template, directives })
class FakeComponent { }
return FakeComponent;
}

TA貢獻1825條經(jīng)驗 獲得超6個贊
我的解決方案:
Angular 2.0 ViewResolver類
class myViewResolver extends ViewResolver{
resolve(component: Type): ViewMetadata {
var view = super.resolve(component);
// TODO: Write logic here:-)
view.templateUrl = 'app/app.html';
return view;
}
}
bootstrap(App,[
provide(ViewResolver , {useClass:myViewResolver})
]);
添加回答
舉報