Как назначить MatDialog собственную функцию в материале angular

Question

Я работаю над реализацией Popup / Dialog, используя angular материал . Существует встроенная функция openDialog() для открытия диалогового окна, я хочу изменить ее на свой function

Это мой DashboardComponent

import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { MymodalComponent } from '../modals/mymodal/mymodal.component';   

constructor(public dialog: MatDialog) { }

openDialog(): void {
const dialogRef = this.dialog.open(LastseenDevicesComponent, {
    width: '80%',
    height:'80%',
    panelClass: 'my-dialog',
    disableClose: true ,
  data: { name: "this.name", animal: "this.city" }
});

Html файл DashboardComponent

<ol>
  <li>
    <mat-form-field>
      <mat-label>Where do you stay?</mat-label>
      <input matInput [(ngModel)]="name">
    </mat-form-field>
  </li>
  <li>
    <button mat-raised-button (click)="openDialog()">Pick city or food</button>
  </li>
  <li *ngIf="city">
    You chose: <i>{{city}}</i>
  </li>
  <li *ngIf="food_from_modal">
    I love {{food_from_modal}}
  </li>
</ol> 

Это компонент диалога LastseenDevicesComponent

<div md-dialog-content>
     <button class="close" mat-button (click)="onNoClick()">
        <mat-icon>close</mat-icon>
    </button>
    
    <p>What's your favorite city?</p>
    <mat-form-field>
        <mat-label>Favorite City</mat-label>
        <input matInput [(ngModel)]="data.city">
    </mat-form-field>

</div>
<div mat-dialog-actions>
    <button id="matbuttonClose" mat-button [mat-dialog-close]="data.animal" cdkFocusInitial>Ok</button>
  </div>
</html>

Я хочу сделать это вместо openDialog(): void Я хочу заменить его своим код в DashboardComponent

//This getting called when I click on my chart bar
function lastSeenDevice() {

const dialogRef = this.dialog.open(LastseenDevicesComponent, {
    width: '80%',
    height:'80%',
    panelClass: 'my-dialog',
    disableClose: true ,
  data: { name: this.name, animal: this.city }
});

Если я сделаю это, вы получите ошибку

ERROR TypeError: Cannot read property 'open' of undefined
at Chart.lastSeenDevice (dashboard.component.ts:509)
at Chart.handleEvent (Chart.js:10213)
at Chart.eventHandler (Chart.js:10150)
at listener (Chart.js:10083)
at HTMLCanvasElement.proxies.<computed> (Chart.js:7813)
at ZoneDelegate.invokeTask (zone-evergreen.js:391)
at Object.onInvokeTask (core.js:39680)
at ZoneDelegate.invokeTask (zone-evergreen.js:390)
at Zone.runTask (zone-evergreen.js:168)
at ZoneTask.invokeTask [as invoke] (zone-evergreen.js:465)

Answer 1

Вы получили эту ошибку из-за потери контекста (this имеет значение null в вашей функции). Чтобы исправить это, вы должны установить контекст вручную, например, с помощью bind (но в этом случае вы можете переопределить контекст только один раз):

ngOnInit() {
  lastSeenDevice = lastSeenDevice.bind(this);
}

или объявите свою функцию с помощью функции стрелки внутри вашего компонента:

ngOnInit() {
  window.lastSeenDevice = () => { this.dialog.open(...) }
}

Чтобы исправить ошибку ввода с помощью второго варианта, вы можете вручную установить тип окна на любой: (<any>window).lastSeenDevice

Также мне нужно очистить глобальную функцию в ngOnDestroy, чтобы избежать утечек памяти .

ngOnDestroy() {
 (<any>window).lastSeenDevice = null;
}

Answer 2

Причина появления этой ошибки:

Cannot read property 'open' of undefined

Это то, что "this" в this.dialog.open внутри вашей функции lastSeenDevice () относится к другому контексту, нежели контекст класса.

Итак, чтобы исправить это: внутри компонента панели мониторинга убедитесь, что у вас есть функция lastSeenDevice (), и удалите ключевое слово «function», чтобы сделать его методом класса и, таким образом, будет ссылаться на «this» как на контекст класса панели мониторинга. .

Итак, от:

function lastSeenDevice() { ... your code here . . .}

до:

lastSeenDevice() { ... your code here ... }

Также убедитесь, что на:

 <button mat-raised-button (click)="openDialog()">

вы измените его на:

 <button mat-raised-button (click)="lastSeenDevice()">