基于值而非ngTemplateOutlet变量的动态模板 [英] Dynamic template based on value rather than variable with ngTemplateOutlet
问题描述
我正在尝试模拟一组动态问题.考虑一个测验,其中一个问题是多项选择,第二个问题是单个答案,第三个问题是是..等等.
I'm trying to mock up a dynamic set of questions. Think of a quiz, where one question is multiple choice, the second is single answer, the third is yes no..etc.
使用angular 4.1,我认为使用ngTemplateOutlet进行模板将是实现此目的的最佳方法,其想法是我可以将所有复选框设置为相同样式,并将所有单选按钮设置为相同样式,等等.
Using angular 4.1, I thought that templating with ngTemplateOutlet would be the best way to go for this, the idea being that I can style all the checkboxes to be the same, and all the radiobuttons the same etc.
@Component({
selector: 'my-component',
template: `
<div *ngFor="let item of items">
<ng-template [ngTemplateOutlet]="item.type" [ngOutletContext]="{ item: item }"></ng-template>
</div>`
})
export class MyComponent {
@Input() items: any[];
}
@Component({
selector: 'my-app',
template: `
<div>
<my-component [items]="questions">
<ng-template #question let-item="item">{{item?.question}}</ng-template>
<ng-template #check let-item="item">checkboxes here {{item?.type}} - {{item?.values}}</ng-template>
<ng-template #radio let-item="item">radio buttons here{{item?.type}} - {{item?.values}}</ng-template>
<ng-template #bool let-item="item">boolean here{{item?.type}} - {{item?.values}}</ng-template>
<ng-template #textbox let-item="item">textbox here{{item?.type}} - {{item?.values}}</ng-template>
</my-component>
</div>`
})
export class App {
@ViewChild('question') question;
@ViewChild('type') type;
@ViewChild('values') values;
questions = [
{ question: "my checkbox question", type: "check", values: ["checkbox1","checkbox2","checkbox3","checkbox4"] },
{ question: "my radiobutton question", type: "radio", values: ["radio1","radio2","radio3","radio4"] } ,
{ question: "my boolean question", type: "bool", values: ["yes", "no"] } ,
{ question: "my textbox question", type: "textbox", values: ["maybe something maybe nothing"] }
];
我已经创建了这个矮子作为概念证明,但是它确实不工作.所有代码都在src/app.ts
文件中.
I've created this plunker as a proof of concept effort, but it is not working. All the code is in the src/app.ts
file.
我想要的是这样的:
My checkbox question?
checkbox 1, checkbox2, checkbox3
my radio button question
radiobutton1, radiobutton2, radiobutton3
my boolean question?
yes, no
如何修改此代码以使用变量的值指示要使用的模板?
How can I modify this code to use the value of variable to indicate which template to use?
推荐答案
正如我在评论中所说,您必须为ngTemplateOutlet
属性传递TemplateRef
.可以这样完成:
As i said in comment you have to pass TemplateRef
for ngTemplateOutlet
property. It could be done like this:
@Directive({
selector: 'ng-template[type]'
})
export class QuestionTemplate {
@Input() type: string;
constructor(public template: TemplateRef) {}
}
app.html
<my-component [items]="questions">
<ng-template type="question" ...>...</ng-template>
<ng-template type="check" ...>...</ng-template>
...
my.component.ts
@Component({
selector: 'my-component',
template: `
<div *ngFor="let item of items">
<ng-template
[ngTemplateOutlet]="dict['question']"
[ngOutletContext]="{ item: item }"></ng-template>
<ng-template
[ngTemplateOutlet]="dict[item.type]"
[ngOutletContext]="{ item: item }"></ng-template>
</div>`
})
export class MyComponent {
@Input() items: any[];
@ContentChildren(QuestionTemplate) templates: QueryList<QuestionTemplate>;
dict = {};
ngAfterContentInit() {
this.templates.forEach(x => this.dict[x.type] = x.template);
}
}
Plunker Example
这篇关于基于值而非ngTemplateOutlet变量的动态模板的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!