angular – 基于值而不是使用ngTemplateOutlet变量的动态模板
发布时间:2020-12-17 17:54:54 所属栏目:安全 来源:网络整理
导读:我正试图模拟一组动态的问题.想想一个测验,其中一个问题是多项选择,第二个是单一答案,第三个是yes no..etc. 使用angular 4.1,我认为用ngTemplateOutlet进行模板化是最好的方法,我的想法是我可以将所有复选框设置为相同,并且所有的radiobutton都是相同的等等.
我正试图模拟一组动态的问题.想想一个测验,其中一个问题是多项选择,第二个是单一答案,第三个是yes no..etc.
使用angular 4.1,我认为用ngTemplateOutlet进行模板化是最好的方法,我的想法是我可以将所有复选框设置为相同,并且所有的radiobutton都是相同的等等. @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"] } ]; 我努力了created this plunker as a proof of concept,但它没有用.所有代码都在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) {} } 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 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |