Блог

Я работаю с Angular 10 и Angular Material (я новичок в этом фреймворке). Прямо сейчас у меня есть таблица с некоторыми данными, которые нужно показать пользователю. Когда пользователь нажимает кнопку, ему должен отображаться модальный. У меня уже есть модальный, и он появляется, когда пользователь нажимает кнопку, но модальный должен заполняться данными каждой строки таблицы (каждая строка содержит разные данные). Я использую mat-dialog, чтобы показать модальный пользователю. Вот пример массива, который содержит данные таблицы:

 const ELEMENT_DATA: PeriodicElement[] = [
  {invoice: 1, category: 'Hydrogen', description: 'Hi!', startDate: 'H', status: '1', see: ''},
  {invoice: 2, category: 'Helium', description: 'Hi!', startDate: 'He', status: '1', see: ''},
  {invoice: 3, category: 'Lithium', description: 'Hi!', startDate: 'Li', status: '1', see: ''},
  {invoice: 4, category: 'Beryllium', description: 'Hi!', startDate: 'Be', status: '1', see: ''},
  {invoice: 5, category: 'Boron', description: 'Hi!', startDate: 'B', status: '1', see: ''},
  {invoice: 6, category: 'Carbon', description: 'Hi!', startDate: 'C', status: '1', see: ''},
  {invoice: 7, category: 'Nitrogen', description: 'Hi!', startDate: 'N', status: '1', see: ''},
  {invoice: 8, category: 'Oxygen', description: 'Hi!', startDate: 'O', status: '1', see: ''},
  {invoice: 9, category: 'Fluorine', description: 'Hi!', startDate: 'F', status: '1', see: ''},
  {invoice: 10, category: 'Neon', description: 'Hi!', startDate: 'Ne', status: '1', see: ''},
];
  

Здесь вид таблицы:

Когда пользователь нажимает на последний значок, появляется диалоговое окно, и оно должно содержать то, что содержит строка. Проблема в том, что я не могу связать свой компонент таблицы данных с моим компонентом диалогового примера. Есть ли какой-нибудь способ передать данные моего компонента таблицы в мой компонент диалога?

Большое вам спасибо за вашу помощь!

PS. Если вам нужно больше контекста, пожалуйста, дайте мне знать.

Вы можете справиться с этим следующим образом. Сначала вам нужно создать свой DialogComponent

TableDialogComponent.ts

 export class TableDialogComponent implements OnInit {

  constructor(
    public dialogRef: MatDialogRef<TableDialogComponent>,
    @Inject(MAT_DIALOG_DATA) public dialogData: any
  ) {}

  ngOnInit(): void {}

}
  

TableDialogComponent.html

 <h2 mat-dialog-title>{{ dialogData.title }}</h2>
<mat-dialog-content class="mat-typography">
  <div>
      {{dialogData.message}} // here you can play with your data that you bind to the message property
  </div>
</mat-dialog-content>
<mat-dialog-actions align="end">
  <button mat-button mat-dialog-close>Done</button>
</mat-dialog-actions>
  

Затем при нажатии кнопки строки вашей пользовательской таблицы вы можете передать свой элемент showDialog(element) методу. Где element данные таблицы, которые вы привязываете

 showDataDialog(data: any): void {
    const dialogRef = this.dialog.open(TableDialogComponent, {
      width: '350px',
      data: {
        title: `Table Title`,
        message: data, // Here you can send anything for your modal component
      },
    });

    dialogRef.afterClosed().subscribe((result) => {});
}
  

Я рекомендую использовать сервисы. Сервисы являются одиночными, поэтому существует только 1 копия класса (и данных), общая для всех компонентов, и я думаю, что ее можно было бы использовать в этой ситуации.

В принципе, вы бы определили или каким-то образом установили свой ELEMENT_DATA в сервис.

итак, у вас есть файл MyService.ts с этой переменной в этом файле.

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

пример

 myService : MyService
  

Теперь оба компонента могут получить доступ

 myService.ELEMENT_DATA 
  

и вы можете быть уверены, что всегда ссылаетесь на одно и то же значение.

Вы можете передавать данные в диалоговое окно и использовать @Inject(MAT_DIALOG_DATA) для получения переданных данных.

 const dialogConfig = new MatDialogConfig();

dialogConfig.disableClose = true;
dialogConfig.autoFocus = true;

dialogConfig.data = {
    id: 1,
    title: 'Angular For Beginners'
};
  

для связи между компонентами используйте Subject или BehaviourSubject в службе. Вы можете подписывать и подписывать данные.