Angular-Как использовать оператор распространения в угловом HTML-шаблоне

Question

У меня есть простое угловое приложение с модулем и компонентом.Для простоты предположим, что компонент ts и файл template похожи на следующий фрагмент

import {
  Component,
  Input,
  OnInit
} from '@angular/core';

import {
  ChildComponent
} from './child/child.component';


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'test-app';
  val;
  clickEvt() {
    alert("clicked")
  }

  isTruthy() {
    if (( < HTMLInputElement > document.getElementById("inp1")).value == "admin" && ( < HTMLInputElement > document.getElementById("inp2")).value == "admin") {
      return true;
    }
    return false;
  }

  ngOnInit() {
    this.val = {};
    this.val.id = "id1";
    this.val.class = "abc";
  }
}

<label>User</label>
<input {{...val}} (input)="isTruthy()" />
<br>
<label>Password</label>
<input id="inp2" (input)="isTruthy()" />
<button (click)="clickEvt()">Login</button>
<div *ngIf="isTruthy(); then truthy else falsey"></div>
<ng-template #truthy>
  <h1>Success</h1>
  <child-component [value]="isTruthy()"></child-component>
</ng-template>
<ng-template #falsey>
  <h1>Failure</h1>
  <child-component [value]="isTruthy()"></child-component>
</ng-template>

В шаблоне HTML вы можете заметить, что я пытаюсь использовать {{ ...val }}.Это моя попытка использовать оператор распространения в шаблоне, но, к сожалению, я получаю исключение

ОШИБКА DOMException: Не удалось выполнить 'setAttribute' для 'Element': '{{... val.id}} 'не является допустимым именем атрибута.

Я просто хочу знать, есть ли способ использовать оператор распространения или есть эквивалентный способ в угловых, чтобы дать несколько атрибутов за один проход, который получаетсяиз переменной?

Answer 1

Один из способов сделать это - создать директиву, такую ​​как

import { Directive, ElementRef, HostListener, Input } from '@angular/core';

@Directive({
  selector: '[setAttr]'
})
export class AttrDirective {

  constructor(private el: ElementRef) { }

  @Input() attr: any;

  ngOnInit(){
    if(this.attr){
       console.log(this.el.nativeElement)
      Object.keys(this.attr).forEach(k=>{
        this.el.nativeElement.setAttribute(k,this.attr[k])
      console.log(this.el.nativeElement)
      })
    }
  }
}

, а затем применить к входным данным, например,

<input type="text" setAttr [attr]="val">

demo

Answer 2

Нет, вы не можете использовать спред в шаблоне (тем более, что вы пытаетесь).

Для этого вам понадобится ссылка на ваш шаблон.

<input #myInput (input)="isTruthy()" />

@ViewChild('myInput', { static: true }) myInput: ElementRef<HTMLInputElement>;

ngOnInit() {
  Object.assign(this.myInput.nativeElement, this.val);
}