我正在尝试模拟一组动态问题。 想想一个测验，其中一个问题是多项选择，第二个是单答案，第三个是是否。等。
使用angular 4.1，我认为使用 ngTemplateOutlet 模板将是最好的方法，这个想法是我可以将所有复选框样式设置为相同，所有单选按钮都相同等。
@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"] }
];
我创建了这个 plunker 作为概念验证工作，但它不起作用。 所有代码都在src/app.ts文件中。
我想要的是这样的东西：
My checkbox question?
checkbox 1, checkbox2, checkbox3
my radio button question
radiobutton1, radiobutton2, radiobutton3
my boolean question?
yes, no
如何修改此代码以使用变量的值来指示要使用的模板？
正如我在评论中所说，您必须为ngTemplateOutlet属性传递TemplateRef。可以这样做：
@Directive({
selector: 'ng-template[type]'
})
export class QuestionTemplate {
@Input() type: string;
constructor(public template: TemplateRef) {}
}
应用.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);
}
}
普伦克示例
我会改变方法，这里是我的 2 美分：
为每种类型的选项(复选框、单选、选择等)创建一个组件。
将它们存储在常量中，将组件的名称作为字符串与组件类映射，例如：
export const optionTypes = {
'TypeRadio': TypeRadio,
'TypeCheckBox': TypeCheckBox,
};
在组件中：
private optionsModule: NgModuleFactory<any>; // we have our components for our options declared in OptionsModule, for example
private optionTypes = optionTypes;
constructor(private compiler: Compiler) {
// Declaring Options Module
this.optionsModule = compiler.compileModuleSync(OptionsModule);
}
在组件的模板中：
<fieldset *ngFor="let question of questions">
<ng-container *ngComponentOutlet="optionTypes[question.type];
ngModuleFactory: optionsModule;"></ng-container>
</fieldset>
请注意，要使其正常工作，您的对象数据应更改type属性：
questions = [
{ question: "my checkbox question", type: "TypeCheckBox", values: ["checkbox1","checkbox2","checkbox3","checkbox4"] },
{ question: "my radiobutton question", type: "TypeRadio", values: ["radio1","radio2","radio3","radio4"] }
];
总结：
- 我们创建一个选项模块
- 我们为每个选项/问题类型创建一个组件(及其模板和逻辑)
- 我们将这些组件的名称添加到数据对象的
type属性中。(或创建一个简单的映射方法：radio->TypeRadio) - 我们使用NgComponentOutlet来动态渲染我们的组件。
- 我们使用 NgModuleFactory 从导入的模块渲染这些组件。
结果：
我们有一个动态组件加载系统用于我们的查询。每个组件都有其逻辑，并为您提供添加酷炫功能和行为的巨大可能性！
这种方法的一个例子(我使用它来拥有 100% 动态模板字段：输入、选择、单选按钮、复选框等)：Angular2：使用 Pipe 动态渲染模板
**您可以稍微更改一下方法，因为它是可选的建议**
@Component({
selector: 'my-component',
template: `
<div *ngFor="let item of items">
<ng-container [ngTemplateOutlet]="item.type" [ngTemplateOutletContext]="{ item: item }">
</ng-container>
</div>
<ng-template #question let-item="item"></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>
`
})
export class MyComponent {
@Input() items: any[];
}
您可以根据"item.type"调用模板，其余结构在您的方法中看起来不错。