Распространение атрибутов для элемента в шаблоне Angular> = 6

Question

У меня есть это в моем коде ...

@Component({
  selector: 'generic-input',
  template: `<div><input [formControl]="control"/></div>`,
})
export class GenericInputComponent implements OnInit {

  @Input('config') config = {placeholder: 'Testability', disabled: true, type: 'text'};

  control;

  constructor() { }

  ngOnInit() {
    this.control = new FormControl();
  }

}

Я хотел бы распространить атрибуты в объекте конфигурации, используя какой-то цикл или что-то еще так, чтобы рендеринг HTML был следующим:

<div><input placeholder='Testability', disabled=true type='text' [formControl]="control"/></div>

Примечание: Это не вариант:

   <div><input [placeholder]='config.placeholder', [disabled]='config.disabled' [formControl]="control"/></div>

Любая помощь и идеи приветствуются.Спасибо.

Answer 1

1.Добавить переменную шаблона:

<div><input #v [formControl]="control"/></div>

2.Связать ViewChild в ts:

@ViewChild('v')
v: ElementRef

3.Заполнить значения в свойстве nativeElement:

const el = this.v.nativeElement
Object.keys(this.config).forEach(key => el[key] = this.config[key])

Обновление

Полный файл component.ts будет выглядеть следующим образом:

@Component({
  selector: 'my-app',
  template: `<div><input #v></div>`
})
export class AppComponent {
  @ViewChild('v')
  v: ElementRef;

  config = { placeholder: 'Testability', disabled: true, type: 'text' };

  ngOnInit() {
    const el = this.v.nativeElement;
    Object.keys(this.config).forEach(key => el[key] = this.config[key]);
  }
}