Параметры углового диалога - PullRequest
Новая
       2

Параметры углового диалога

0 голосов
/ 31 октября 2019

Я хочу создать диалог, в котором есть некоторый API для данных. До реализации диалога API вызывался с помощью идентификатора параметра через routerLink , но, поскольку я выбрал диалоговое окно, для него не существует параметра, поэтому я не могу передать идентификатор в диалоговое окно для APIВызов.

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

HTML: 

<button color="primary" matTooltip="Audit Order" (click)="onCreate(orders.orderId)" style="background-color:rgba(251, 230, 221, 1); border-radius: 5px;">
 AUDIT
</button>

TS: 

import { MatDialog, MatDialogConfig } from '@angular/material';
import { AuditPopupComponent } from '../audit-popup/audit-popup.component';

@Component({
  selector: 'kt-audit',
  templateUrl: './audit.component.html',
  styleUrls: ['./audit.component.scss']
})
export class AuditComponent implements OnInit {

 constructor(private dailog: MatDialog) {}

 ngOnInit() {}

 onCreate(orderId){
    this.route.params.subscribe(params => {
      this._Order.viewOrders(orderId).subscribe(res => {
        this.orderDetails = res.data;
    });
   });
    const dailogConfig = new MatDialogConfig();
    // dailogConfig.disableClose = true;
    dailogConfig.autoFocus = true;
    dailogConfig.width = "50%";
    this.dailog.open(AuditPopupComponent, dailogConfig);
  }
}

Дочерний компонент TS: 

ngOnInit() {
    this.route.params.subscribe(params => {
        this.ps.viewOrders(params['id']).subscribe(res => {
          this.ordersView = res.data;
     });
  });
}

Ответы [ 2 ]

0 голосов
/ 31 октября 2019

Вам просто нужно передать данные в диалог через опции диалога:

TS: 

import { MatDialog, MatDialogConfig } from '@angular/material';
import { AuditPopupComponent } from '../audit-popup/audit-popup.component';

@Component({
  selector: 'kt-audit',
  templateUrl: './audit.component.html',
  styleUrls: ['./audit.component.scss']
})
export class AuditComponent implements OnInit {

 constructor(private dailog: MatDialog) {}

 ngOnInit() {}

 onCreate(orderId){
    this.route.params.subscribe(params => {
      this._Order.viewOrders(orderId).subscribe(res => {
        this.dailog.open(AuditPopupComponent, {
          autoFocus: true,
          width: "50%",
          data: res.data
        });
      });
    });
  }
}

Диалог: 

import { MAT_DIALOG_DATA } from '@angular/material';
import { Inject } from '@angular/core';

@Component({
  selector: 'dialog-data-example-dialog',
  templateUrl: 'dialog-data-example-dialog.html',
})
export class DialogDataExampleDialog {
  constructor(@Inject(MAT_DIALOG_DATA) public data: DialogData) {}
  ngOnInit() {
    this.ordersView = this.data;
  }
}
0 голосов
/ 31 октября 2019

Это может не быть подсказкой для вашего решения, но старайтесь избегать вложенных подписок из-за проблем с обслуживанием в более крупных проектах.

А также вам нужно беспокоиться об уничтожении подписок, если вы неиспользуя их в угловом сервисе

...