Как использовать один компонент в качестве страницы и MatDialog в angular

Question

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

Вызов из компонента `` `var modal = Конструктор this._dialog.open (SingleComponent, {data: {create: true}}); '' *

SingleComponent

```@Component({
  selector: 'single',
  templateUrl: './single.html',
  styleUrls: ['./single.scss'],
  providers: [{
     provide: MatDialogRef,
     useValue: {close: (dialogResult: any) => { }}
  },{ provide: MAT_DIALOG_DATA, useValue: {} }]

}) (publi c dialogRef: MatDialogRef, @Optional () @Inject (MAT_DIALOG_DATA) publi c data: any) `` `

Открывается как в виде страницы, так и в модальном окне, но не может связывать данные между компонентом и одним компонентом и не может закрываться из код this.dialogRef.close(); не работает

Answer 1

Я создал stackblitz для случая использования, который вы упомянули, вы можете go через это один раз

Stackblitz

, если вы получаете g stati c инъекция Ошибка в консоли для кода, который вы написали, вы можете добавить следующие строки, чтобы исправить эту ошибку

в app.module.ts

providers: [
   { provide: MatDialogRef, useValue: {} },
   { provide: MAT_DIALOG_DATA, useValue: [] }
  ]

Надеюсь, это поможет!

Answer 2

объявить dialogRef: MatDialogRef<SingleComponent>;

 this.dialogRef = this.dialog.open(SingleComponent, { data: { create: true } });

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

в single.component.ts добавить это

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

@Inject(MAT_DIALOG_DATA) public data: any

вы можете использовать значение в одном компоненте в data.