Angular Output динамика возможна?

Question

во-первых, извините, я не говорю по-русски и пользуюсь услугами переводчика.

У меня есть несколько родительских компонентов, и я создал для всех них общий дочерний компонент, который должен динамически и автоматически подстраиваться под каждый случай, среди них несколько кнопок, которые будут сгенерированы форексом с использованием данных, отправленных родителем (имя, CSS класс и Output имя).

Вопрос в том, могу ли я создать Output динамическим способом, который указывает непосредственно на функцию соответствующего родителя?

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

Пока что я пытался сделать это в дочернем компоненте, но редактор сам выдает мне ошибку:

componenteHijo.components.ts

@Input() misBotones: any[];
constructor() {
    this.misBotones.forEach(array => {
      @Output() array.nombreVariable: EventEmitter<number>;
    });
}

Конечно, я посылаю от отца array со всеми необходимыми данными:

componentePadre.components.html

<app-componente-hijo [misBotones]="botonesArray"></app-componente-hijo>

Answer 1

Наконец, с помощью людей "Stack Overflow en Español" (Stack Overflow на испанском языке) я нашел решение.

1- Нельзя использовать динамический Output по простой причине: аннотации/декорации @Input и @Output используются во время компиляции, а не во время выполнения.

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

2- В качестве альтернативы можно использовать eventHandler:

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

В примере создается массив данных, который имеет объекты с двумя свойствами: eventHandler и text.

Дочерний компонент получает этот массив и создает серию кнопок, а в ответ на событие щелчка выполняет функцию, содержащуюся в eventHandler.

Componente padre

import { Component } from "@angular/core";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {

  data = [
    {
      eventHandler: () => {
        alert("boton 1");
      },
      text: "boton 1"
    },
    {
      eventHandler: () => {
        alert("boton 2");
      },
      text: "boton 2"
    }
  ];
  
}

Componente hijo

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

@Component({
  selector: "hello",
  template: `
    <div *ngFor="let d of data">
      <button (click)="d.eventHandler()">{{ d.text }}</button>
    </div>
  `,
  styles: [
    `
      h1 {
        font-family: Lato;
      }
    `
  ]
})
export class HelloComponent {
  @Input() data: any[];
}

Ссылка на вопрос на испанском

@qwabra В случае карточек с товарами можно создать компонент типа карточки, который используется несколько раз в пределах *ngFor, и каждый раз при его использовании будет создаваться новый компонент с определенными @Input и @Output. В данном случае я мог бы это сделать, но нет смысла создавать компонент, который каждый раз создает только кнопку.

Это не позволяет мне ответить тебе ниже.

БЛОГ НА HUSL

Angular Output динамика возможна?

Ответы (1 шт):