无法打开购物车对话框-材质对话框-Angular2 +

Question

我有一个购物应用程序，可以在其中打开包含产品详细信息的物料对话框，然后将其添加到购物车中。

但是，当我尝试打开购物车对话框时，似乎无法打开任何东西...

我不确定这是因为我的数据路由不正确，还是对话框的实际打开是否错误。但是看到我的对话框之一起作用了……我很困惑。

购物车按钮.ts

override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
    rootView = inflater.inflate(mContentLayoutResourceId, container, false)
    return rootView
}

fun getRootView(): View {
    return rootView
}

cart-page.ts

export class CartButtonComponent implements OnInit {

  products: any[];
  numProducts: number;
  cartTotal: number;

  constructor(private cartService: CartService, public dialog: MatDialog) {
    this.products = [];
    this.numProducts = 0;
    this.cartTotal = 0;
  }

  ngOnInit() {
    this.cartService.productAdded$.subscribe(data => {
      this.products = data.products;
      this.cartTotal = data.cartTotal;
      this.numProducts = data.products.reduce((acc, prod) => {
        acc += prod.quantity;
        return acc;
      }, 0);
    });
  }

  openCartDialog(prods) {
    console.log(prods);
    this.dialog.open(CartPageComponent, {
      autoFocus: true,
      width: '600px',
      data: prods
    });
  }

}

应用模块

export class CartPageComponent implements OnInit {

  @Input() products: any[];

  constructor(
    private cartService: CartService,
    @Inject(MAT_DIALOG_DATA) private data: any) {
    this.products = [];
  }

  ngOnInit() {
  }

  deleteProduct(product: Product) {
    this.cartService.deleteFromCart(product);
  }
}

仅供参考：所有材料模块都是通过@NgModule({ declarations: [ AppComponent, HomepageComponent, ProductThumbnailComponent, ProductPageComponent, CartPageComponent, ToolbarComponent, NavComponent, DashboardComponent, CartButtonComponent, ], imports: [ BrowserAnimationsModule, BrowserModule, MaterialModule, LayoutModule, ], entryComponents: [ProductPageComponent, CartPageComponent], providers: [], bootstrap: [AppComponent] }) export class AppModule { } 导入的

STACKBLITZ

Answer 1

将MD_DIALOG_DATA标记为可选，

@Optional() @Inject(MD_DIALOG_DATA) private data: any).

如果存在问题，请在您的模块中将MAT_DIALOG_DATA添加到提供商，

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