如何在组件内显示动态控件

Question

我正在尝试构建一个基于输入属性呈现其 html 控件的自定义组件。我遇到困难的地方是确保自定义组件上的所有指令都添加到相应的 html 控件中。也许我做错了？任何见解都会很棒。

<custom-attribute [type]="'dropdown'" [style.display]="'block'" [(ngModel)]="message">

@Component({
  selector: 'custom-attribute',
  template: 
    `
    <input type="text" *ngIf="type === 'text'">
    <select *ngIf="type === 'dropdown'">
    `
})
export class CustomAttribute {
  @Input("type") type: string;
}

Answer 1

试试这个：

<custom-attribute [type]="'dropdown'" [style.display]="'block'" [(message)]="message">

@Component({
    selector: 'custom-attribute',
    template: 
    `
        <input [(ngModel)]="message" type="text" *ngIf="type === 'text'">
        <select *ngIf="type === 'dropdown'">
    `
     })

    export class CustomAttribute {
      @Input("type") type: string;
      @Input('message') model:any;
    }