angular – 基于值而不是使用ngTemplateOutlet变量的动态模板

我正试图模拟一组动态的问题.想想一个测验,其中一个问题是多项选择,第二个是单一答案,第三个是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

angular – 基于值而不是使用ngTemplateOutlet变量的动态模板

解决方法

猜你在找的Angularjs相关文章