Различение двух Angular компонентов, созданных одним и тем же родителем - PullRequest
Новая
       2

Различение двух Angular компонентов, созданных одним и тем же родителем

0 голосов
/ 13 февраля 2020

У меня есть модальный компонент, который показывает только сообщение, и accept button.

accept button будет выполнять функцию в зависимости от того, кто вам звонил.

Один и тот же компонент может создайте несколько модалов (показанных в разные моменты).

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

Как я мог создать уникальный идентификатор для каждого элемента без необходимости передавать его как @Input?

Я пытаюсь сделать пример, но возникают проблемы с jquery.

В любом случае здесь попытка

https://stackblitz.com/edit/angular-gvqdzc

Ответы [ 2 ]

0 голосов
/ 18 февраля 2020

Я нашел решение, хотя оно кажется немного запутанным.

В директиву я добавляю ngif, чтобы оно было доступно только при определенном значении. 

<confirmation-modal *ngIf="expression == 'roles'" [header]="'ARE_YOU_SURE'" [message]="'SENDED_MESSAGE'" (launchAction)="modal1Accepted()">

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

openRolesModal() {
this.expression = 'roles';
let modal = '#selectAttributtesModal';
setTimeout(() => $(modal).modal('show'), 100);
}
0 голосов
/ 13 февраля 2020

Я не совсем понимаю вашу проблему, но вы можете передать данные в диалог (в данном случае идентификатор). Примерно так:

parent.component.ts 

const dialogRef = this.dialog.open(DialogChacraFormComponent, {
      width: 500,
      maxHeight: 500,
      id: idx
});
dialogRef.afterClosed().subscribe(id => {
      doSomething(id);
});

dialog.component.ts 

constructor(
    public dialogRef: MatDialogRef<DialogChacraFormComponent>,
    @Inject(MAT_DIALOG_DATA) public id: number
) { }
onAccept() {
    this.dialogRef.close(this.id);
}
...