Блог

Итак, в настоящее время у меня есть компонент, который имеет несколько кнопок, настраиваемых с помощью опций:

test.component.html

 <button
    *ngIf="cleaning"
    (click)="onCleaning()"
>
    {{'btn.cleaning'|translate}}
</button>

<button
    *ngIf="remove"
    (click)="onRemoving()"
>
    {{'btn.remove'|translate}}
</button>
  

test.component.ts

 @Input() cleaning: boolean;
@Input() remove: boolean;
cleaningForm: FormGroup;
  

parent.component.html

 <test [cleaning]="true" [remove]="false"></test>
  

И идея в том, что этот компонент намного больше и многоразовый, где меняются только кнопки и действия, которые будут нажаты, но для этого всегда требуется форма.

Есть ли другое лучшее решение для получения такого компонента, используя ng-content и как-то запуская форму в родительском компоненте?

Не совсем уверен, хотите ли вы предоставить все кнопки и их методы (щелчка), или этот компонент должен просто выполнять заданные входные данные с очень небольшим количеством логики сам по себе. Последнее интересно, если вы хотите настроить повторно используемые компоненты, такие как всплывающее окно с заданными кнопками.

Вы могли бы использовать не только элементы, но и их функциональность.

Parent.ts

 export class ParentComponent implements OnInit {
  public cbFunction: (e: MouseEvent) => void //or whatever return value

  public ngOnInit(): void {
    this.cbFunction = ((e: MouseEvent) => { this.doFancyStuff(); }).bind(this);
  }
}
  

Parent.html

 <child [callback]="cbFunction" name="cbFktBtn"></child>
  

Дочерний файл.ts

 export class ChildComonent {
   @Input() callback: (e: MouseEvent) => void;
   @Input() name: string;
}
  

Child.html

 <button (click)="callback($event)">{{name}}</button>
  

Это, очевидно, также работает с массивами кнопок (или наборами, или картами, или чем-то еще).