Question

我有一个Web项目，该项目大量使用角度材质对话框。我想针对Web和nativescript-angular应用程序重新使用对话框组件。我将打开，传递和获取参数以及关闭对话框的功能分为两个服务，如下所示：

dialog-service.ts

@Injectable()
export class DialogsService {
  constructor(
    @Inject(MAT_DIALOG_DATA) public data: any,
    public dialog: MatDialog,
    public openedDialog: MatDialogRef<any>
  ) {}

  openDialog(params: any, component: any): Observable<any> {
    const dialogRef = this.dialog.open(component,
        {data: params, width: '90%'});
        return dialogRef.afterClosed();
  }

  getDialogData(): any {
    return this.data;
  }

  closeDialog(result: any) {
    this.openedDialog.close(result);
  }

}

dialog-service.tns.ts

@Injectable()
export class DialogsService {
  constructor(
    private modalService: ModalDialogService,
    private viewContainerRef: ViewContainerRef,
    private modalParams: ModalDialogParams
  ) {}

  openDialog(params: any, component: any): Observable<any> {
    const options: ModalDialogOptions = {
        context: params,
        fullscreen: true,
        viewContainerRef: this.viewContainerRef
    };
    return from(this.modalService.showModal(component, options));
  }

  getDialogData(): any {
    return this.modalParams.context;
  }

  closeDialog(result: any) {
    this.modalParams.closeCallback(result);
  }

}

在打开对话框的组件上，我有这个：

import { DialogsService } from './dialogs.service';

@Component()
export class HostComponent {

  constructor(
   private dialogsService: DialogsService
  ){}

  openDialog() {
    this.dialogsService.openDialog({myString: 'hello'},
    HelloDialogComponent).subscribe(
      result => {
        console.log(result.myString);
      }
    );
  }
}

HelloDialogComponent看起来像这样：

@Component()
export class HelloDialogComponent implements OnInit {

  myString: string;     
  constructor(private dialogService: DialogService){}

  ngOnInit() {
    const data = this.dialogsService.getDialogData();
    this.myString = data.myString;
  }

  closeDialog() {
    this.dialogService.closeDialog({myString: this.myString})
  }
}

当我用ng serve运行Web应用程序时，出现此错误：

NullInjectorError: No provider for InjectionToken MatDialogData

我已经在应用程序的AppModule中导入了MatDialogModule。我该如何进行这项工作，或者其他如何在角度材质对话框和本机脚本对话框之间共享代码（除了html视图和css）。

代码共享本机脚本和角度材料对话框

0 个答案: