javascript - 无法将数据传递到 Material 对话框 - Angular2+

Question

我无法让我的 Material 对话框工作。我有什么遗漏的吗？

product-thumbnail.ts 我将单击此打开对话框

export class ProductThumbnailComponent implements OnInit {

  @Input() product: Product;

  constructor(public dialog: MatDialog) { }

  ngOnInit() {
  }

  openPopup(prod) {
    this.dialog.open(ProductPageComponent, {
      autoFocus: true,
      width: '400px',
      data: {product: prod}
    });

  }

}

product-page.ts 这是对话框组件

export class ProductPageComponent implements OnInit {

  @Input() product: Product;

  constructor(
    private cartService: CartService,
    public dialogRef: MatDialogRef<ProductPageComponent>,
    @Inject(MAT_DIALOG_DATA) private data
  ) { }

  ngOnInit() {
  }

  onAddToCart() {
    this.cartService.addToCart(this.product);
  }

}

Stackblitz

Answer 1

在您提供的 stackblitz 中，您缺少动画依赖项

我从您提交的内容中 fork 并更新了依赖项，并将 ProductPage 组件添加到应用程序模块的条目组件中。

https://shopping-app-lypbxe.stackblitz.io

@NgModule({
  declarations: [ProductPageComponent
..
  ],
  entryComponents: [ProductPageComponent],
  imports: [
..
  ],
  providers: [...],
  bootstrap: [AppComponent]
})