3

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

У меня есть несколько родительских компонентов, и я создал для всех них общий дочерний компонент, который должен динамически и автоматически подстраиваться под каждый случай, среди них несколько кнопок, которые будут сгенерированы форексом с использованием данных, отправленных родителем (имя, 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>
1

1 ответ 1

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. В данном случае я мог бы это сделать, но нет смысла создавать компонент, который каждый раз создает только кнопку.

  • Это не позволяет мне ответить тебе ниже.
1
  • 1
    "las anotaciones/decoraciones @Input y @Output son usadas en tiempo de compilación, no de ejecución" - а как тогда работают магазины? выводят карточки товаров?? посмотри todomvc.com/examples/angularjs/# и посмотри мой комментарий к вопросу - там интересней.
    – qwabra
    16 дек 2020 в 13:19

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.